/* ============================================================================ * Handle — design tokens * * Locked 2026-05-02 to the Handle brand grid: * • Wordmark : Tiempos Headline Semibold Italic (Klim Type Foundry) * • Body / UI : Geist Sans (UI), Geist Mono (numerics) * • Light mode : warm paper #F5F1EA · ink black #0A0A0A * • Dark mode : warm-tinted near-black surfaces · paper-warm text * * Per spec 16_UI_UX_SPEC.md §18 — both modes Phase 1 (mandatory). * Theme resolution order: * 1. attribute (set by JS from ui_preferences) * 2. @media (prefers-color-scheme: dark) * 3. Default = light (warm paper is brand primary) * * Reference: handle/brand/README.md * ========================================================================= */ /* ---------- 1. Webfonts ---------- */ /* Self-hosted Geist (variable). Was a jsdelivr @import that 404'd, dropping the brand body/mono font to system fallback site-wide. FONT_SELFHOST_GEIST_V1 */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/static/fonts/Geist-Variable.woff2') format('woff2'); } @font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/static/fonts/GeistMono-Variable.woff2') format('woff2'); } @font-face { font-family: 'Tiempos Headline'; font-style: italic; font-weight: 600; font-display: swap; src: url('/static/fonts/tiempos-headline-semibold-italic.woff2') format('woff2'); } /* ---------- 2. Mode-agnostic primitives ---------- */ :root { /* — Type — */ --font-sans : 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono : 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; --font-display : 'Tiempos Headline', Georgia, 'Times New Roman', serif; --type-xs : 11px; --lh-xs : 1.4; --type-sm : 13px; --lh-sm : 1.5; --type-md : 15px; --lh-md : 1.5; --type-lg : 18px; --lh-lg : 1.4; --type-xl : 24px; --lh-xl : 1.3; --type-2xl : 32px; --lh-2xl : 1.2; --type-xxl : 32px; --lh-xxl : 1.2; /* legacy alias */ --weight-normal : 400; --weight-medium : 500; --weight-semibold : 600; --weight-bold : 700; --tracking-tight : -0.01em; --tracking-normal : 0; --tracking-wide : 0.04em; /* — Spacing (4px base) — */ --sp-1 : 4px; --sp-2 : 8px; --sp-3 : 12px; --sp-4 : 16px; --sp-5 : 20px; --sp-6 : 24px; --sp-8 : 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px; /* — Radius — */ --r-sm : 4px; --r-md : 8px; --r-lg : 12px; --r-xl : 16px; --r-2xl : 24px; --r-pill : 999px; /* — Motion — */ --ease-out : cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out : cubic-bezier(0.65, 0, 0.35, 1); --dur-fast : 150ms; --dur-base : 250ms; --dur-slow : 400ms; /* — Z-index ladder — */ --z-base : 0; --z-sticky : 100; --z-dropdown : 200; --z-popover : 300; --z-modal : 400; --z-toast : 500; --z-tooltip : 600; /* — Layout — */ --layout-max-width : 1440px; --layout-sidebar-w : 240px; --layout-topbar-h : 56px; } /* ---------- 3. LIGHT theme (default — brand primary surface) ---------- */ :root, :root[data-theme="light"] { /* — Brand identity — */ --ink-black : #0A0A0A; /* near-black, easier on eyes than #000 */ --paper-warm : #F5F1EA; /* warm off-white, the brand surface */ --paper-warm-deep : #EDE8DD; /* slightly darker paper for hover */ /* — Brand actions (black ink on paper IS the brand) — */ --brand-primary : #0A0A0A; --brand-primary-soft : rgba(10, 10, 10, 0.06); --brand-primary-deep : #000000; --brand-primary-glow : rgba(10, 10, 10, 0.12); --brand-accent : #6E5A2C; /* aged bronze (premium, not gold-bright) */ --brand-accent-soft : rgba(110, 90, 44, 0.10); /* — Surfaces — */ --bg-page : #F5F1EA; /* paper-warm */ --bg-surface : #FBF8F2; /* whiter card on paper */ --bg-elevated : #FFFFFF; /* full white for high-elevation */ --bg-overlay : rgba(20, 18, 14, 0.40); /* modal scrim */ /* — Text — */ --text-primary : #0A0A0A; /* ink */ --text-secondary : #5A574F; /* warm gray, mid */ --text-muted : #8A8678; /* warm gray, soft */ --text-on-brand : #F5F1EA; /* paper on filled-ink button */ /* — Borders — */ --border-default : #E0DBD2; /* paper-warm darker */ --border-strong : #C8C2B5; --border-focus : var(--brand-primary); /* — Status (muted, editorial — NEVER electric) — */ --status-success : #2D6A4F; /* sage forest */ --status-success-soft : rgba(45, 106, 79, 0.10); --status-warning : #B07D2C; /* amber ochre */ --status-warning-soft : rgba(176, 125, 44, 0.12); --status-danger : #9B3B3B; /* brick red */ --status-danger-soft : rgba(155, 59, 59, 0.10); --status-info : #3B5566; /* slate */ --status-info-soft : rgba(59, 85, 102, 0.10); /* — Shadow (warmer, softer — paper sits on wood, not metal) — */ --shadow-sm : 0 1px 2px rgba(20, 18, 14, 0.06); --shadow-md : 0 4px 12px rgba(20, 18, 14, 0.08); --shadow-lg : 0 12px 32px rgba(20, 18, 14, 0.12); --shadow-xl : 0 24px 64px rgba(20, 18, 14, 0.16); --glow-brand : 0 0 24px var(--brand-primary-glow); --glow-accent : 0 0 20px rgba(110, 90, 44, 0.20); /* — Gradients (used sparingly — editorial, not flashy) — */ --gradient-hero : radial-gradient(800px circle at 30% 20%, rgba(10, 10, 10, 0.04) 0%, transparent 65%); --gradient-card : linear-gradient(180deg, var(--bg-surface) 0%, var(--paper-warm-deep) 100%); --gradient-cta : linear-gradient(135deg, var(--brand-primary) 0%, #1A1814 100%); } /* ---------- 4. DARK theme (warm-tinted, frosted — per brand grid) ---------- */ :root[data-theme="dark"] { /* — Brand identity — */ --ink-black : #0A0A0A; --paper-warm : #F5F1EA; /* now used for text */ --paper-warm-deep : #E8E3D8; /* — Brand actions (paper on ink IS the dark variant) — */ --brand-primary : #F5F1EA; --brand-primary-soft : rgba(245, 241, 234, 0.08); --brand-primary-deep : #FFFFFF; --brand-primary-glow : rgba(245, 241, 234, 0.16); --brand-accent : #C9A875; /* warm bronze, lighter for dark contrast */ --brand-accent-soft : rgba(201, 168, 117, 0.12); /* — Surfaces (warm-tinted dark, not pure black — see brand grid notification) — */ --bg-page : #1A1814; /* warm-near-black */ --bg-surface : #252220; --bg-elevated : #2E2A26; --bg-overlay : rgba(10, 9, 7, 0.70); /* — Text — */ --text-primary : #F5F1EA; --text-secondary : #B5AFA0; --text-muted : #75706A; --text-on-brand : #0A0A0A; /* — Borders — */ --border-default : #3A3530; --border-strong : #524C44; --border-focus : var(--brand-primary); /* — Status (dark-mode friendly — slightly brighter for legibility) — */ --status-success : #4FAF7E; --status-success-soft : rgba(79, 175, 126, 0.14); --status-warning : #D9A85A; --status-warning-soft : rgba(217, 168, 90, 0.14); --status-danger : #C87070; --status-danger-soft : rgba(200, 112, 112, 0.14); --status-info : #7BA8C2; --status-info-soft : rgba(123, 168, 194, 0.14); /* — Shadow (deeper, more frosted feel for dark) — */ --shadow-sm : 0 1px 2px rgba(0, 0, 0, 0.25); --shadow-md : 0 4px 12px rgba(0, 0, 0, 0.35); --shadow-lg : 0 12px 32px rgba(0, 0, 0, 0.50); --shadow-xl : 0 24px 64px rgba(0, 0, 0, 0.60); --glow-brand : 0 0 24px var(--brand-primary-glow); --glow-accent : 0 0 20px rgba(201, 168, 117, 0.30); /* — Gradients — */ --gradient-hero : radial-gradient(800px circle at 30% 20%, rgba(245, 241, 234, 0.06) 0%, transparent 65%); --gradient-card : linear-gradient(180deg, var(--bg-surface) 0%, var(--bg-elevated) 100%); --gradient-cta : linear-gradient(135deg, var(--brand-primary) 0%, var(--paper-warm-deep) 100%); } /* ---------- 5. Auto dark via system preference (when no override) ---------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { /* Re-declare dark values when the user hasn't explicitly chosen */ --bg-page : #1A1814; --bg-surface : #252220; --bg-elevated : #2E2A26; --bg-overlay : rgba(10, 9, 7, 0.70); --brand-primary : #F5F1EA; --brand-primary-soft : rgba(245, 241, 234, 0.08); --brand-primary-deep : #FFFFFF; --brand-primary-glow : rgba(245, 241, 234, 0.16); --brand-accent : #C9A875; --brand-accent-soft : rgba(201, 168, 117, 0.12); --text-primary : #F5F1EA; --text-secondary : #B5AFA0; --text-muted : #75706A; --text-on-brand : #0A0A0A; --border-default : #3A3530; --border-strong : #524C44; --status-success : #4FAF7E; --status-success-soft : rgba(79, 175, 126, 0.14); --status-warning : #D9A85A; --status-warning-soft : rgba(217, 168, 90, 0.14); --status-danger : #C87070; --status-danger-soft : rgba(200, 112, 112, 0.14); --status-info : #7BA8C2; --status-info-soft : rgba(123, 168, 194, 0.14); --shadow-sm : 0 1px 2px rgba(0, 0, 0, 0.25); --shadow-md : 0 4px 12px rgba(0, 0, 0, 0.35); --shadow-lg : 0 12px 32px rgba(0, 0, 0, 0.50); --shadow-xl : 0 24px 64px rgba(0, 0, 0, 0.60); --gradient-hero : radial-gradient(800px circle at 30% 20%, rgba(245, 241, 234, 0.06) 0%, transparent 65%); --gradient-card : linear-gradient(180deg, var(--bg-surface) 0%, var(--bg-elevated) 100%); --gradient-cta : linear-gradient(135deg, var(--brand-primary) 0%, var(--paper-warm-deep) 100%); } } /* ---------- 6. Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast : 1ms; --dur-base : 1ms; --dur-slow : 1ms; } } /* ---------- 7. Base resets ---------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg-page); color: var(--text-primary); font-family: var(--font-sans); font-size: var(--type-sm); line-height: var(--lh-sm); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11'; transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); } /* Wordmark / display heading */ .wordmark, .display, h1.brand { font-family: var(--font-display); font-style: italic; font-weight: 600; letter-spacing: var(--tracking-tight); } /* Tabular numerics by default */ .num, [data-numeric], .kpi-value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-normal); } ::selection { background: var(--brand-primary-soft); color: var(--text-primary); } :focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; border-radius: var(--r-sm); } a { color: var(--brand-primary); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); } a:hover { color: var(--brand-primary-deep); } /* ---------- 8. Utility primitives ---------- */ .surface { background: var(--bg-surface); border-radius: var(--r-lg); } .surface-elev { background: var(--bg-elevated); border-radius: var(--r-lg); box-shadow: var(--shadow-md); } .surface-hero { background: var(--bg-surface); background-image: var(--gradient-hero); border-radius: var(--r-xl); } .text-muted { color: var(--text-muted); } .text-secondary { color: var(--text-secondary); } .label-eyebrow { font-size: var(--type-xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-muted); } .divider { height: 1px; background: var(--border-default); margin: var(--sp-4) 0; } /* ════════════════════════════════════════════════════════════════════════ * Token compatibility layer — Phase 1E pages built with shorthand names * Maps the names used in inline page styles (paper, ink, surface, etc.) * to the real tokens above so light + dark modes both work. * ════════════════════════════════════════════════════════════════════════ */ :root { /* Page surface */ --paper: var(--bg-page); --paper-deep: var(--bg-surface); /* Text */ --ink: var(--text-primary); --ink-2: var(--text-secondary); --ink-3: var(--text-muted); /* Surface tiers */ --surface-1: var(--bg-surface); --surface-2: var(--bg-elevated); /* Borders */ --line: var(--border-default); --line-2: var(--border-default); /* Brand */ --brand-navy: #3B5BDB; --brand-gold: #C9A84C; /* Spacing scale — 4px base, matches design system */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --sp-10: 48px; --sp-12: 64px; /* Font scale aliases */ --fs-xs: var(--type-xs); --fs-sm: var(--type-sm); --fs-md: var(--type-md); --fs-lg: var(--type-lg); --fs-xl: var(--type-xl); --fs-2xl: var(--type-2xl); --fs-3xl: 36px; /* Font family aliases */ --font-body: var(--font-sans); /* Radius aliases */ --radius-1: var(--r-sm); --radius-2: var(--r-md); --radius-3: var(--r-lg); /* Layout */ --layout-topbar-h: 48px; /* Status colors */ --status-danger: #9b1c1c; --status-danger-bg: #fdecec; --status-danger-ink: #9b1c1c; --status-danger-line: #f3b6b6; --status-warn: #d97706; --status-warn-bg: #fff7e6; --status-warn-ink: #8a5a00; --status-warn-line: #f0d089; } /* Dark-mode overrides for the brand accent + status colors */ :root[data-theme="dark"] { --brand-navy: #6B8AFF; --brand-gold: #E5C778; --status-danger-bg: rgba(155, 28, 28, 0.18); --status-danger-ink: #FF7A7A; --status-warn-bg: rgba(217, 119, 6, 0.18); --status-warn-ink: #FFC36B; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --brand-navy: #6B8AFF; --brand-gold: #E5C778; --status-danger-bg: rgba(155, 28, 28, 0.18); --status-danger-ink: #FF7A7A; --status-warn-bg: rgba(217, 119, 6, 0.18); --status-warn-ink: #FFC36B; } } /* ── Phase 1F #1 tokens (added A1.2) ────────────────────────────────────── * Source of truth: Tech Spec/_DESIGN_LANGUAGE.md §2 * Sizing/layout tokens — theme-agnostic (live in :root only). * ──────────────────────────────────────────────────────────────────────── */ :root { /* Stage shell */ --stage-rail-h: 88px; --stage-canvas-pad: var(--sp-6); --stage-work-toolbar-h: 56px; --stage-tab-h: 40px; /* Modular Picker */ --picker-section-gap: var(--sp-4); --picker-chip-h: 32px; --picker-chip-pad-x: var(--sp-3); --picker-chip-gap: var(--sp-2); --picker-tile-w: 88px; --picker-tile-h: 64px; --picker-advanced-collapsed-h: 40px; /* Filmstrip + image deep view */ --filmstrip-h: 96px; --filmstrip-thumb-w: 128px; --filmstrip-thumb-h: 80px; --filmstrip-thumb-gap: var(--sp-2); --filmstrip-thumb-r: var(--r-md); --filmstrip-current-ring-w: 2px; --filmstrip-hero-star-size: 16px; --deepview-main-pad: var(--sp-4); --deepview-rightpanel-w: 360px; /* Per-stream badge */ --stream-badge-h-sm: 20px; --stream-badge-h-md: 24px; --stream-badge-h-lg: 28px; --stream-badge-pad-x: var(--sp-2); --stream-badge-radius: var(--r-pill); --stream-badge-gap: var(--sp-1); /* Per-stream colors (semantic; both themes get parity via underlying status tokens) */ --stream-exterior: var(--status-info-ink); --stream-interior: var(--status-success-ink); --stream-floorplan: var(--brand-accent); --stream-walkthrough: var(--status-warn-ink); --stream-reel: var(--status-danger-ink); --stream-matterport: #9b6dd6; /* MyDay landing grid */ --myday-section-gap: var(--sp-8); --myday-card-w: 340px; --myday-card-h-min: 132px; --myday-section-title-h: 40px; /* QC review layout */ --qcreview-main-min-h: 480px; --qcreview-toolbar-h: 48px; --qcreview-decision-bar-h: 72px; /* Address-match triage card (3-way prompt) */ --triage-card-w: 480px; --triage-button-h: 56px; --triage-button-gap: var(--sp-2); /* Pending Review card */ --pending-card-min-h: 96px; --pending-card-pad: var(--sp-4); --pending-card-gap: var(--sp-3); --pending-card-status-w: 120px; /* Settings layout */ --settings-rail-w: 240px; --settings-content-max-w: 720px; --settings-section-gap: var(--sp-8); /* SLA pill (canonicalized) */ --sla-pill-h: 22px; --sla-pill-pad-x: var(--sp-2); --sla-pill-radius: var(--r-pill); } /* ============================================================================ * 9. LCH INPUT LAYER -- three base inputs per mode (Linear 2026 playbook) * * Locked 2026-05-23 per _C1_5_DESIGN_FLOOR_RESEARCH_RESPONSE.md section 5. * Source: Aufmann and Heckel "A calmer interface for a product in motion" * (linear.app/now/how-we-redesigned-the-linear-ui). * * Pattern: instead of 98 hex values per theme, define 3 LCH inputs per mode * (paper / ink / bronze) and DERIVE every brand-surface token from them via * CSS Relative Color Syntax. Status tokens stay semantic (sage / amber / * brick / slate are independent palette choices). * * Browser support: Safari 16.4+ (Mar 2023), Chrome 119+ (Oct 2023), * Firefox 113+ (May 2023). All ICP tier operators are on these or newer. * * Dev color tool ships at /admin/color-tool -- exposes hue/chroma/lightness * sliders for the 3 inputs per mode; updates propagate to all surfaces * in real time via document.documentElement.style.setProperty(). * * Cascade discipline: this block lives at the BOTTOM of tokens.css so its * :root declarations OVERRIDE the hex tokens defined above. The legacy hex * values stay as fallbacks for any context where Relative Color Syntax * cannot compute (rare; flagged in browser console). * ========================================================================= */ /* ---------- LIGHT MODE -- 3 LCH inputs ---------- */ :root, :root[data-theme="light"] { --lch-paper: #F5F1EA; --lch-ink: #0A0A0A; --lch-bronze: #6E5A2C; --paper-warm: var(--lch-paper); --paper-warm-deep: lch(from var(--lch-paper) calc(l - 4) c h); --bg-page: var(--lch-paper); --bg-surface: lch(from var(--lch-paper) calc(l + 3) c h); --bg-elevated: lch(from var(--lch-paper) calc(l + 5) c h); --ink-black: var(--lch-ink); --text-primary: var(--lch-ink); --text-secondary: lch(from var(--lch-ink) 38 4 80); --text-muted: lch(from var(--lch-ink) 56 4 80); --text-on-brand: var(--lch-paper); --brand-primary: var(--lch-ink); --brand-primary-soft: lch(from var(--lch-ink) l c h / 0.06); --brand-primary-deep: lch(from var(--lch-ink) calc(l - 1) c h); --brand-primary-glow: lch(from var(--lch-ink) l c h / 0.12); --border-default: lch(from var(--lch-paper) calc(l - 8) calc(c + 0.5) h); --border-strong: lch(from var(--lch-paper) calc(l - 20) calc(c + 1) h); --brand-accent: var(--lch-bronze); --brand-accent-soft: lch(from var(--lch-bronze) l c h / 0.10); --glow-accent: 0 0 20px lch(from var(--lch-bronze) l c h / 0.20); --glow-brand: 0 0 24px var(--brand-primary-glow); } /* ---------- DARK MODE -- paper becomes text, ink becomes bg ---------- */ :root[data-theme="dark"] { --lch-paper: #F5F1EA; --lch-ink: #1A1814; --lch-bronze: #C9A875; --paper-warm: var(--lch-paper); --paper-warm-deep: lch(from var(--lch-paper) calc(l - 4) c h); --bg-page: var(--lch-ink); --bg-surface: lch(from var(--lch-ink) calc(l + 5) c h); --bg-elevated: lch(from var(--lch-ink) calc(l + 8) c h); --ink-black: var(--lch-ink); --text-primary: var(--lch-paper); --text-secondary: lch(from var(--lch-paper) 70 6 80); --text-muted: lch(from var(--lch-paper) 50 4 80); --text-on-brand: var(--lch-ink); --brand-primary: var(--lch-paper); --brand-primary-soft: lch(from var(--lch-paper) l c h / 0.08); --brand-primary-deep: lch(from var(--lch-paper) calc(l + 2) c h); --brand-primary-glow: lch(from var(--lch-paper) l c h / 0.16); --border-default: lch(from var(--lch-ink) calc(l + 12) calc(c + 2) h); --border-strong: lch(from var(--lch-ink) calc(l + 22) calc(c + 2) h); --brand-accent: var(--lch-bronze); --brand-accent-soft: lch(from var(--lch-bronze) l c h / 0.12); --glow-accent: 0 0 20px lch(from var(--lch-bronze) l c h / 0.30); --glow-brand: 0 0 24px var(--brand-primary-glow); } /* ---------- Auto-dark via prefers-color-scheme ---------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { --lch-paper: #F5F1EA; --lch-ink: #1A1814; --lch-bronze: #C9A875; --bg-page: var(--lch-ink); --bg-surface: lch(from var(--lch-ink) calc(l + 5) c h); --bg-elevated: lch(from var(--lch-ink) calc(l + 8) c h); --text-primary: var(--lch-paper); --text-secondary: lch(from var(--lch-paper) 70 6 80); --text-muted: lch(from var(--lch-paper) 50 4 80); --text-on-brand: var(--lch-ink); --brand-primary: var(--lch-paper); --brand-primary-soft: lch(from var(--lch-paper) l c h / 0.08); --brand-primary-deep: lch(from var(--lch-paper) calc(l + 2) c h); --brand-primary-glow: lch(from var(--lch-paper) l c h / 0.16); --border-default: lch(from var(--lch-ink) calc(l + 12) calc(c + 2) h); --border-strong: lch(from var(--lch-ink) calc(l + 22) calc(c + 2) h); --brand-accent: var(--lch-bronze); --brand-accent-soft: lch(from var(--lch-bronze) l c h / 0.12); --glow-accent: 0 0 20px lch(from var(--lch-bronze) l c h / 0.30); --glow-brand: 0 0 24px var(--brand-primary-glow); } } /* End of LCH input layer. * Status tokens (success / warning / danger / info) stay semantic. If a * future audit wants LCH-uniformity across all tokens, lift the 4 status * hexes into 4 more --lch-* inputs above and derive *-soft variants the * same way. */ /* ============================================================================ * 10. GLASS-BRONZE LAYER -- Phase C primitives (v2 amplified 2026-05-23 PM) * * v2: dialed up per Brandon "this needs to look world class." v1 was too * conservative -- visible delta was ~10%. v2 targets the Linear 2026 / * Reflect-app glass aesthetic with clearly visible elevation, halo, and * bronze rim. Still eye-comfortable for 8hr workdays (no saturated * gradients beneath content; bronze stays low chroma; depth via shadow * not color). * * Source-of-derivation unchanged: --lch-paper / --lch-ink / --lch-bronze * inputs in section 9. Tune via dev color tool. * ========================================================================= */ /* ---------- LIGHT MODE glass primitives ---------- */ :root, :root[data-theme="light"] { --surface-glass: lch(from var(--lch-paper) calc(l + 2) c h / 0.78); --surface-glass-elevated: lch(from var(--lch-paper) calc(l + 5) c h / 0.92); --surface-glass-overlay: lch(from var(--lch-paper) calc(l - 4) c h / 0.55); --halo-bronze-radial: radial-gradient(900px circle at 50% -150px, lch(from var(--lch-bronze) 72 24 h / 0.30), lch(from var(--lch-bronze) 72 24 h / 0.08) 35%, transparent 70%); --rim-bronze-soft: 0 0 0 1px lch(from var(--lch-bronze) l c h / 0.55), 0 0 32px -4px lch(from var(--lch-bronze) l c h / 0.40); --rim-bronze-strong: 0 0 0 2px lch(from var(--lch-bronze) l c h / 0.80), 0 0 48px -4px lch(from var(--lch-bronze) l c h / 0.60); --depth-shadow-soft: 0 1px 0 0 lch(from var(--lch-paper) calc(l + 8) c h / 0.5) inset, 0 16px 40px -12px lch(from var(--lch-ink) l c h / 0.22), 0 0 0 1px lch(from var(--lch-paper) calc(l - 14) calc(c + 1) h / 0.55); --depth-shadow-elevated: 0 1px 0 0 lch(from var(--lch-paper) calc(l + 10) c h / 0.7) inset, 0 32px 80px -16px lch(from var(--lch-ink) l c h / 0.32), 0 0 0 1px lch(from var(--lch-paper) calc(l - 16) calc(c + 1) h / 0.65); --backdrop-blur-glass: blur(24px) saturate(150%); --backdrop-blur-modal: blur(10px) saturate(150%); --state-hover-bg: lch(from var(--lch-paper) calc(l - 7) calc(c + 0.4) h / 0.65); --state-active-bg: lch(from var(--lch-paper) calc(l - 10) calc(c + 0.6) h / 0.75); --state-focus-ring: lch(from var(--lch-bronze) l c h / 0.50); } /* ---------- DARK MODE glass primitives (v2 amplified) ---------- */ :root[data-theme="dark"] { /* Cards visibly LIFT from the page bg -- elevation hierarchy now reads. */ --surface-glass: lch(from var(--lch-ink) calc(l + 12) c h / 0.72); --surface-glass-elevated: lch(from var(--lch-ink) calc(l + 18) c h / 0.86); --surface-glass-overlay: lch(from var(--lch-ink) calc(l - 2) c h / 0.55); /* Halo: now visibly warm-tinted at top, fades by 70%. World-class scope. */ --halo-bronze-radial: radial-gradient(900px circle at 50% -150px, lch(from var(--lch-bronze) 72 36 h / 0.50), lch(from var(--lch-bronze) 72 36 h / 0.14) 35%, transparent 70%); /* Rim: clearly visible across the room, bronze identity-only. */ --rim-bronze-soft: 0 0 0 1.5px lch(from var(--lch-bronze) l c h / 0.75), 0 0 32px -4px lch(from var(--lch-bronze) l c h / 0.55); --rim-bronze-strong: 0 0 0 2px lch(from var(--lch-bronze) l c h / 0.95), 0 0 56px -4px lch(from var(--lch-bronze) l c h / 0.75); /* Depth: cards feel carved into glass, deep shadow + crisp top highlight. */ --depth-shadow-soft: 0 1px 0 0 lch(from var(--lch-paper) calc(l - 10) c h / 0.18) inset, 0 16px 40px -8px rgba(0, 0, 0, 0.6), 0 0 0 1px lch(from var(--lch-ink) calc(l + 22) calc(c + 1.5) h / 0.6); --depth-shadow-elevated: 0 1px 0 0 lch(from var(--lch-paper) calc(l - 10) c h / 0.22) inset, 0 32px 80px -12px rgba(0, 0, 0, 0.75), 0 0 0 1px lch(from var(--lch-ink) calc(l + 26) calc(c + 1.5) h / 0.7); --backdrop-blur-glass: blur(24px) saturate(150%); --backdrop-blur-modal: blur(10px) saturate(150%); --state-hover-bg: lch(from var(--lch-ink) calc(l + 14) calc(c + 1.5) h / 0.65); --state-active-bg: lch(from var(--lch-ink) calc(l + 18) calc(c + 2) h / 0.75); --state-focus-ring: lch(from var(--lch-bronze) l c h / 0.55); } /* ---------- Auto-dark via prefers-color-scheme (v2 dark mirror) ---------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { --surface-glass: lch(from var(--lch-ink) calc(l + 12) c h / 0.72); --surface-glass-elevated: lch(from var(--lch-ink) calc(l + 18) c h / 0.86); --surface-glass-overlay: lch(from var(--lch-ink) calc(l - 2) c h / 0.55); --halo-bronze-radial: radial-gradient(900px circle at 50% -150px, lch(from var(--lch-bronze) 72 36 h / 0.50), lch(from var(--lch-bronze) 72 36 h / 0.14) 35%, transparent 70%); --rim-bronze-soft: 0 0 0 1.5px lch(from var(--lch-bronze) l c h / 0.88), 0 0 36px -4px lch(from var(--lch-bronze) l c h / 0.68); --rim-bronze-strong: 0 0 0 2px lch(from var(--lch-bronze) l c h / 1.0), 0 0 64px -4px lch(from var(--lch-bronze) l c h / 0.88); --depth-shadow-soft: 0 1px 0 0 lch(from var(--lch-paper) calc(l - 10) c h / 0.18) inset, 0 16px 40px -8px rgba(0, 0, 0, 0.6), 0 0 0 1px lch(from var(--lch-ink) calc(l + 22) calc(c + 1.5) h / 0.6); --depth-shadow-elevated: 0 1px 0 0 lch(from var(--lch-paper) calc(l - 10) c h / 0.22) inset, 0 32px 80px -12px rgba(0, 0, 0, 0.75), 0 0 0 1px lch(from var(--lch-ink) calc(l + 26) calc(c + 1.5) h / 0.7); --backdrop-blur-glass: blur(24px) saturate(150%); --backdrop-blur-modal: blur(10px) saturate(150%); --state-hover-bg: lch(from var(--lch-ink) calc(l + 14) calc(c + 1.5) h / 0.65); --state-active-bg: lch(from var(--lch-ink) calc(l + 18) calc(c + 2) h / 0.75); --state-focus-ring: lch(from var(--lch-bronze) l c h / 0.55); } } /* End of v2 amplified glass layer. * v1 backup at tokens.css.before_glass_v2_20260523 if revert needed. */