/* ============================================================================ DELTABEAM — DESIGN TOKENS v5.3.0 ("steel") Single source of truth for type, color, line, space, radius, elevation, motion & the AI-experience layer. DARK IS THE DEFAULT appearance (v5.1) — the home field is now the dark ladder; light remains first-class, activated with [data-theme="light"] on (both themes are fully defined below; the default applies via the data-theme attribute, set to "dark" in the app/book pre-paint). Components reference semantic tokens only — never literal hex. v5 grammar (direction approved from full-bleed mockups, 2026-06-06, backed by the research synthesis in BRAND.md §9; every small-text value below computed ≥ 4.5:1 on the surface it sits on, after compositing — worst cases recorded inline): - Palette: black, white, and the logo's silver. The 7-stop steel gradient appears ONLY at numeral-scale poster moments (the findings count, a divider number, one headline word). Never on small UI. - Interaction accent: INK. Selection is engraving — more ink, not paint: a 2px ink tab underline, an ink tick, an ink progress fill, ink focus rings. In dark the accent inverts to off-white. - Structure: a floating jet-black rail (its own rounded column) beside ONE window that joins a pale list panel to a white work surface; all on the gray ground. Elevation is zone separation, not glow. - Dark (v5.2, 2026-06-23) is a PREMIUM NEAR-BLACK ladder: black is the field, with SMALL zone steps (ground #040406 → panel #0A0A0C → surface #0E0E12) separated by hairlines + elevation, not the old large gray steps (panel #1D1D21 → surface #27272C, which read "cheap"). Hairlines are translucent white; the action inverts to a white button with ink text. See the [data-theme="dark"] block for the full rationale + contrast re-check. - Cards & raised surfaces (v5.3, 2026-06-24) are ELEVATED, not flat translucent: a faint top sheen over --surface + a 1px top RIM-LIGHT + a soft SEPARATION shadow lift them off the ground (--card-* tokens). A flat rgba fill + blur over the near-black field reads "cheap" — blur needs colourful content behind it to refract; premium dark gets depth from elevation, not glass. Literal frosted glass (--glass-*) is reserved for overlays/chrome that sit OVER content. See BRAND.md §5/§8. - Status: quiet dots + the word. Open = amber · Resolved = green · Confirmed = ink (definitive, no alarm hue) · Dismissed = neutral. - AI Experience (v5.1): genuine AI work shows as STEEL LIGHT + a morphing perception point-cloud (--ai-* below), gated to the real AI moments and living only in chrome — never on a drawing. See BRAND.md §6. - Banned: blue, orange, red, violet, brass/gold, gradient on app surfaces. (v5.1 exception: a CONTAINED steel glow + ambient light-fold are legal in the AI-experience layer only — chrome-side, gated to a real AI moment, monochrome. The drawing surface stays inviolate.) ============================================================================ */ /* ---- Webfonts (self-hosted, subset on build; font-display: swap) ----------- Switzer — Fontshare, ITF Free Font License (fonts/LICENSE-Switzer-FFL.txt). Commit Mono — SIL OFL (fonts/LICENSE-CommitMono.txt), 400/500 instances. Both remain placeholder-tier faces; purchase-tier swaps occupy the same slots (Untitled Sans ~$173 web+desktop; Berkeley Mono $790 Startup tier at 2–7 employees — license audit 2026-06-06). */ @font-face { font-family: "Switzer"; src: url("fonts/Switzer-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Commit Mono"; src: url("fonts/CommitMono-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Commit Mono"; src: url("fonts/CommitMono-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } /* Fraunces — the serif of record, display statements only (v6, owner-approved 2026-07-12). Undercase Type, SIL OFL (fonts/LICENSE-Fraunces-OFL.txt). Variable opsz 9–144; set high-opsz at display sizes for the editorial high-contrast cut. Working face; a purchase-tier swap can occupy the same slot later. */ @font-face { font-family: "Fraunces"; src: url("fonts/Fraunces-Variable.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; } /* ============================================================================ LIGHT — the default. Gray ground, pale panel, white work surface. Contrast (computed 2026-06-06): ink 16.9–18.5 · secondary 6.6–7.3 · tertiary 4.8–5.2 (computed for --panel and --surface; on the page ground use --text-secondary for small text) · on-action 18.5 · rail-ink on rail 7.9 · open-text 4.9–5.4. ============================================================================ */ :root { color-scheme: light; /* ---- Type ----------------------------------------------------------------- One owned sans, one owned mono. Mono is for data and identifiers (W18×35, B-318, 99.4) — never labels, never headings. */ --font-sans: "Switzer", -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto, sans-serif; --font-mono: "Commit Mono", ui-monospace, "SF Mono", Consolas, monospace; --font-serif: "Fraunces", Georgia, "Times New Roman", serif; /* display statements only */ /* Scale (px in comments) */ --text-numeral: 10.5rem; /* 168 — the poster numeral */ --text-display: 4rem; /* 64 — hero statements */ --text-h1: 3rem; /* 48 */ --text-h2: 2.125rem; /* 34 */ --text-h3: 1.5rem; /* 24 */ --text-page-title: 2.625rem; /* 42 — the poster page title */ --text-title: 1.1875rem; /* 19 — card / pane titles */ --text-body: 1.0625rem; /* 17 — default document body */ --text-sm: 0.9375rem; /* 15 — UI controls */ --text-caption: 0.8125rem; /* 13 — captions */ --text-micro: 0.6875rem; /* 11 — caps labels, table heads */ --leading-display: 1.02; --leading-heading: 1.12; --leading-tight: 1.35; --leading-body: 1.6; /* Tracking: display sizes tighten; UI/data sizes sit at zero. */ --tracking-numeral: -0.05em; /* the poster numeral only */ --tracking-display: -0.035em; /* ≥ 34px */ --tracking-heading: -0.025em; /* 19–33px */ --tracking-body: 0em; /* body / UI / data */ --tracking-mono: 0; /* mono is never tracked */ --tracking-caps: 0.09em; /* uppercase labels (eyebrows, table heads) */ --weight-regular: 400; --weight-book: 480; /* badge words */ --weight-medium: 540; /* names, buttons, tabs — optical cut */ --weight-semibold: 560; /* caps labels, definitive states */ --weight-display: 700; /* poster titles */ --weight-numeral: 750; /* the poster numeral only */ /* ---- Color · the three zones + ink ---------------------------------------- */ --bg: #E8E8EA; /* page ground behind everything */ --panel: #F4F4F5; /* list panel inside the window */ --surface: #F6F6F8; /* work surface — a soft off-white CANVAS (v5.4; was #FFFFFF) so pure-white cards/inputs/active-rows lift off it. Premium-light layering: off-white canvas, white cards (mirrors the dark near-black ladder). */ --surface-sunken: #EDEDF0; /* wells/tracks — a touch below the canvas so the white active segment + fields read raised (v5.4; was #F4F4F5) */ --text: #131316; --text-secondary: #55565C; /* 6.7 worst case (panel) */ --text-tertiary: #6B6C72; /* 4.8 worst case (panel) */ --text-disabled: #A6A7AD; /* inactive controls only — WCAG-exempt */ --placeholder: #6B6C72; /* 5.2 on the light field */ /* ---- Color · STEEL — the logo's metal, poster moments only ----------------- The one gradient in the system. Numeral-scale only: the findings count, a divider number, one headline word. Never on small UI, the avatar, ticks, underlines, or progress fills. */ --steel: linear-gradient(115deg, #8C939C 0%, #EEF1F4 14%, #767D87 32%, #B3B9C1 50%, #5E656E 66%, #D2D7DD 83%, #878E98 100%); --steel-text: #5E656E; /* solid steel cut — large text (≥24px) only */ --numeral-filter: none; /* ---- Color · INK — the interaction accent ---------------------------------- Selection is engraving. The accent is the ink itself; selected surfaces take more ink, never a hue. */ --accent: #131316; --on-accent: #FFFFFF; --selection: rgba(19, 19, 22, 0.15); --focus-soft: rgba(19, 19, 22, 0.16); /* 3px input focus wash */ /* ---- Color · action = primary buttons, in ink ------------------------------ */ --action: #131316; --on-action: #FFFFFF; /* 18.5:1 */ /* ---- Color · status (dots + the word; Confirmed is ink, definitive) -------- Dots are redundant with the badge word; the amber and green cuts clear the 3:1 non-text floor on white (3.3 / 5.0). --warn-text is the small-text cut for error messages (5.4 white · 4.9 panel). */ --warn-dot: #B98300; --warn-text: #8A6400; --ok-dot: #3E7B53; --neutral-dot: #B7B8BD; /* ---- Line system (alpha rules — they read over every zone) ----------------- */ --line-w: 1px; --hairline: rgba(19, 19, 22, 0.08); --hairline-strong: rgba(19, 19, 22, 0.16); --line-section: #131316; /* pairs with 2px width */ /* ---- Interaction fills ------------------------------------------------------ */ --hover: rgba(19, 19, 22, 0.024); /* table-row hover */ --row-hover: rgba(19, 19, 22, 0.04); /* panel list-row hover */ --row-active: #FFFFFF; /* active list row */ --row-active-shadow: 0 1px 2px rgba(15, 15, 18, 0.05); --progress-track: rgba(19, 19, 22, 0.10); --selected-fill: rgba(19, 19, 22, 0.06); /* engraved segmented state */ --field: #FFFFFF; /* control fills */ /* ---- The rail: a jet-black floating column (constant chrome) --------------- The rail stays jet in both themes; its whites are constants. */ --rail-bg: #0B0B0D; --rail-ink: #A2A4AB; /* 7.9 on the rail */ --rail-ink-active: #FFFFFF; --rail-hover: rgba(255, 255, 255, 0.08); --rail-active: rgba(255, 255, 255, 0.14); --rail-shadow: 0 8px 24px rgba(10, 10, 12, 0.35); /* ---- The window: panel + work surface, joined ------------------------------- */ --frame-gap: 10px; /* .app padding and rail↔window gap */ --window-border: rgba(19, 19, 22, 0.07); --window-shadow: 0 1px 2px rgba(15, 15, 18, 0.04), 0 12px 32px rgba(15, 15, 18, 0.07); /* ---- Glass (sticky chrome that content scrolls beneath; docs/marketing) ---- */ --glass-bg: rgba(232, 232, 234, 0.78); --glass-bg-strong: rgba(232, 232, 234, 0.90); --glass-border: rgba(19, 19, 22, 0.08); --glass-blur: saturate(120%) blur(16px); /* ---- Shadows (neutral, warm-free; transient layers only) ------------------- */ --shadow-xs: 0 1px 2px rgba(15, 15, 18, 0.05); --shadow-sm: 0 1px 2px rgba(15, 15, 18, 0.05), 0 4px 12px rgba(15, 15, 18, 0.06); --shadow-md: 0 2px 4px rgba(15, 15, 18, 0.04), 0 16px 40px rgba(15, 15, 18, 0.08); --shadow-lg: 0 2px 4px rgba(15, 15, 18, 0.05), 0 28px 64px rgba(15, 15, 18, 0.10); /* ---- Card surface (v5.3 — ELEVATED, never a flat translucent fill) ---------- A card is a raised surface lifted off the ground by elevation, not a translucent fill (real frosted glass needs colourful content behind it to refract; over a flat field it just reads "cheap"). Use --glass-* (above) ONLY for overlays / chrome over content. BRAND.md §5/§8. v5.4 (light): pure-WHITE cards on the soft off-white canvas (--surface), lifted by a soft, layered drop shadow — decoupled from --surface so the card stays the brightest step in the ladder. (Dark keeps the sheen-over-near-black recipe, which DOES read because the surface is near-black, not white.) */ --card-bg: #FFFFFF; --card-bg-hover: #FFFFFF; --card-border: rgba(19, 19, 22, 0.07); --card-rim: rgba(255, 255, 255, 0.90); --card-shadow: 0 1px 2px rgba(16, 18, 22, 0.05), 0 4px 10px -3px rgba(16, 18, 22, 0.08), 0 14px 30px -12px rgba(16, 18, 22, 0.12); --card-shadow-hover: 0 2px 5px rgba(16, 18, 22, 0.07), 0 8px 18px -5px rgba(16, 18, 22, 0.10), 0 24px 46px -14px rgba(16, 18, 22, 0.18); /* ---- Color · data-viz ramp (ink first, neutrals after) --------------------- */ --viz-1: #131316; --viz-2: #55565C; --viz-3: #87888E; --viz-4: #B3B4BA; --viz-5: #D8D8DC; --viz-6: #ECECEE; --grid-line: rgba(19, 19, 22, 0.05); /* ---- Radius (soft machine) -------------------------------------------------- */ --radius-xs: 6px; /* badges, small chips */ --radius-sm: 9px; /* buttons, inputs */ --radius-md: 12px; /* cards, islands */ --radius-lg: 16px; /* the window, the rail, overlays */ --radius-xl: 20px; /* marketing stages only */ --radius-full: 9999px; /* ---- Space (8-point grid; 4 exists for hairline-adjacent optics) ----------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; --space-11: 160px; --space-12: 192px; /* ---- Motion — one curve, three durations ------------------------------------ */ --ease: cubic-bezier(0.32, 0.72, 0, 1); --dur-fast: 120ms; /* hover, press */ --dur-base: 240ms; /* theme, reveals */ --dur-slow: 480ms; /* large transitions */ /* ---- Layout ------------------------------------------------------------------ */ --container: 1120px; --container-wide: 1280px; --z-nav: 100; --z-overlay: 200; /* ---- Paper (mode-independent) ------------------------------------------------- Drawing sheets render as paper: white in BOTH themes (a document is not UI; in dark the sheet is deliberately the brightest figure on screen — pdf.js convention). The citation marker is engraving: a dashed ink rectangle over a low-alpha ink fill. Stroke 16.9:1 on paper — far over the 3:1 non-text floor; the dash pattern and rounded fill keep it distinct from drafting linework. */ --paper: #FFFFFF; --paper-ink: #1B1D21; --paper-line: #555A63; --paper-line-faint: #B9BEC6; --paper-grid: rgba(27, 29, 33, 0.18); --paper-cite: #1B1D21; --paper-cite-fill: rgba(19, 19, 22, 0.08); /* ---- AI Experience (v5.1.0) — the "Navier perceiving" layer ------------------ Genuine AI work is expressed by STEEL LIGHT + a morphing perception point-cloud, gated to the real AI moments and living ONLY in chrome — never on a drawing. Monochrome: no new hue. Mode-independent (like --paper-*): the perception view is a dark focused surface in BOTH themes, so these values do not transpose. Honesty is part of the system — every treatment maps to a real state; no fabricated effort, no internal pipeline-stage names, no confidence number (see BRAND.md §6). */ --ai-luminance: #EAEFF4; /* steel light core — perception highlights */ --ai-field: #B4BFCC; /* the perception point-cloud mid-tone */ --ai-glow: rgba(190, 201, 214, 0.20);/* the ambient working halo (chrome only) */ --ai-fold: rgba(220, 226, 234, 0.12);/* the raking steel light-fold */ --ai-provenance: var(--text-secondary); /* the "perceived by Navier" marker ink */ --ai-perceive-bg: #0A0A0C; /* the dark perception-view work surface */ --ai-reveal-dur: 140ms; /* per-mark finding reveal */ --ai-reveal-stagger: 72ms; /* inter-mark stagger */ --ai-pulse-dur: 5500ms; /* ambient breathing (~0.18 Hz, calm) */ --ai-morph-dur: 1700ms; /* perception-cloud morph between forms */ } /* Thin rules occupy one physical pixel on dense displays. */ @media (min-resolution: 2dppx) { :root { --line-w: 0.5px; } } /* ============================================================================ DARK — the premium near-black ladder (v5.2, 2026-06-23). BLACK is the field. v5.1 used large gray zone steps (panel #1D1D21 → surface #27272C); on screen that read "cheap." This revision drops the ground to a true near-black and keeps the zone steps SMALL (ground #040406 → panel #0A0A0C → surface #0E0E12), letting hairlines + elevation do the separating — the Apple / pro-dark approach (black canvas, near-black cards lifted by a border + shadow). Text brightens to a crisp off-white; the status hues are re-cut to read richly on black. Contrast re-checked: ink ~18 · secondary ~7.6 · tertiary ~5.5 · on-action ~18 (all on the new near-black surfaces, which RAISE — not lower — every ratio vs the gray ladder). Owner-approved evolution (Metareview redesign, 2026-06-23). Light is unchanged. ============================================================================ */ [data-theme="dark"] { color-scheme: dark; --bg: #040406; --panel: #0A0A0C; --surface: #0E0E12; --surface-sunken: #08080A; --text: #F5F5F7; --text-secondary: #A2A2AA; --text-tertiary: #85858E; --text-disabled: #5A5A62; --placeholder: #9A9AA2; --steel: linear-gradient(115deg, #9BA2AB 0%, #F4F6F9 14%, #848B95 32%, #C2C8D0 50%, #6C737C 66%, #DEE2E8 83%, #959CA6 100%); --steel-text: #B7BDC5; --numeral-filter: drop-shadow(0 2px 28px rgba(222, 226, 232, 0.12)); --accent: #F4F4F6; /* ink inverts to a crisp off-white */ --on-accent: #0A0A0C; --selection: rgba(244, 244, 246, 0.22); --focus-soft: rgba(244, 244, 246, 0.28); --action: #F5F5F7; /* white button, ink text */ --on-action: #0A0A0C; --warn-dot: #E3AC44; --warn-text: #E3AC44; --ok-dot: #56C98A; --neutral-dot: #5E5E66; --hairline: rgba(255, 255, 255, 0.07); --hairline-strong: rgba(255, 255, 255, 0.14); --line-section: rgba(255, 255, 255, 0.26); --hover: rgba(255, 255, 255, 0.035); --row-hover: rgba(255, 255, 255, 0.05); --row-active: rgba(255, 255, 255, 0.07); --row-active-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); --progress-track: rgba(255, 255, 255, 0.09); --selected-fill: rgba(255, 255, 255, 0.07); --field: rgba(255, 255, 255, 0.05); --rail-bg: #08080A; --rail-ink: #93939B; --rail-active: rgba(255, 255, 255, 0.12); --rail-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07), 0 18px 44px rgba(0, 0, 0, 0.7); --window-border: rgba(255, 255, 255, 0.08); --window-shadow: 0 30px 80px rgba(0, 0, 0, 0.72); --glass-bg: rgba(4, 4, 6, 0.72); --glass-bg-strong: rgba(4, 4, 6, 0.90); --glass-border: rgba(255, 255, 255, 0.08); --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40); --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.50); --shadow-md: 0 14px 36px rgba(0, 0, 0, 0.60); --shadow-lg: 0 10px 28px rgba(0, 0, 0, 0.55), 0 32px 80px rgba(0, 0, 0, 0.65); /* ---- Card surface (v5.3 — elevated; see :root for the full rationale) ------- */ --card-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.012) 34%, rgba(255, 255, 255, 0) 72%), var(--surface); --card-bg-hover: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.02) 34%, rgba(255, 255, 255, 0) 72%), var(--surface); --card-border: rgba(255, 255, 255, 0.07); --card-rim: rgba(255, 255, 255, 0.11); --card-shadow: inset 0 1px 0 0 var(--card-rim), 0 1px 2px rgba(0, 0, 0, 0.50), 0 16px 40px -16px rgba(0, 0, 0, 0.80); --card-shadow-hover: inset 0 1px 0 0 rgba(255, 255, 255, 0.15), 0 2px 5px rgba(0, 0, 0, 0.55), 0 26px 58px -18px rgba(0, 0, 0, 0.90); --viz-1: #F5F5F7; --viz-2: #A2A2AA; --viz-3: #8A8A92; --viz-4: #5C5C64; --viz-5: #303036; --viz-6: #1C1C20; --grid-line: rgba(245, 245, 247, 0.05); }