/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ DepthGaze · Design Tokens Extracted from the approved hero (Variant D · Liquid Eye / Eye-as-window) Single CSS custom-properties block — drop into :root or any scope. Token philosophy ──────────────── • Colours are named by FUNCTION (ink, paper, silt) and ROLE (amber = brand, night = app surface, shell = quiet panel) — not by hue. Hex values are the reference; semantic aliases below let downstream code stay legible. • Type scale is paired (display / body / mono) at four steps each. The hero uses 116/17/11; the page below it uses 64–80/15–17/10–13. • Spacing is a 4px base, grouped on the 56px page gutter we used in the hero. • Radius is intentionally restrained: pill (CTA), 16 (panel), 12 (card), 8 (input), 4 (chip). No squircles, no novelty values. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ :root { /* ─────────────── 01 · Colour ─────────────── */ /* Primitives — the only place hex values live */ --dg-night: #04121C; /* hero ground; darkest UI surface */ --dg-deeper: #07243C; /* one step up, used for CTA text on amber */ --dg-deep: #0E3A5C; /* mid-water blue */ --dg-tide: #1E5577; /* lighter water blue, accent only */ --dg-ink: #0B1F2A; /* paper-context body text */ --dg-silt: #6B7B83; /* secondary / metadata text */ --dg-paper: #FBF8F2; /* light surface; hero text */ --dg-sand: #F4EFE6; /* warm paper, pre-rendered photographic */ --dg-shell: #E8DFCF; /* quiet panel / inline-note background */ --dg-amber: #D89A2E; /* brand · primary CTA · live indicator */ --dg-amber-2: #E8B254; /* brand · highlight, italic accent */ --dg-amber-warm: #B57A1F; /* brand · darker, used in mark gradients */ --dg-line: rgba(11, 31, 42, 0.10); /* hairline on paper */ --dg-line-strong: rgba(11, 31, 42, 0.18); /* divider on paper */ --dg-line-dark: rgba(244, 239, 230, 0.12);/* hairline on night */ --dg-line-dark-2: rgba(244, 239, 230, 0.22);/* divider on night */ /* Semantic aliases — ALWAYS prefer these in component code */ --color-bg: var(--dg-night); --color-bg-paper: var(--dg-paper); --color-bg-quiet: var(--dg-shell); --color-fg: var(--dg-paper); /* on dark */ --color-fg-paper: var(--dg-ink); /* on light */ --color-fg-muted: rgba(244, 239, 230, 0.78); --color-fg-muted-paper: var(--dg-silt); --color-fg-faint: rgba(244, 239, 230, 0.55); --color-brand: var(--dg-amber); --color-brand-hi: var(--dg-amber-2); --color-brand-on: var(--dg-deeper); /* fg on amber */ --color-rule: var(--dg-line); --color-rule-strong: var(--dg-line-strong); --color-rule-dark: var(--dg-line-dark); --color-rule-dark-strong:var(--dg-line-dark-2); /* ─────────────── 02 · Typography ─────────────── */ /* Families */ --font-display: 'Instrument Serif', 'Times New Roman', Georgia, serif; --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace; /* Display scale (Instrument Serif) — used for headlines */ --type-display-hero: 116px; /* hero H1, desktop */ --type-display-1: 80px; /* tablet hero / page section H1 */ --type-display-2: 64px; /* page section H2 */ --type-display-3: 48px; /* sub-section / disclosure heading */ --type-display-4: 32px; /* card title */ /* Body scale (Inter) */ --type-body-lg: 17px; /* hero lede */ --type-body-md: 15px; /* default body */ --type-body-sm: 13px; /* nav, secondary */ --type-body-xs: 12px; /* tertiary */ /* Mono scale (JetBrains Mono) — metadata, eyebrows, telemetry */ --type-meta-md: 11px; /* primary meta line */ --type-meta-sm: 10px; /* secondary meta / footer */ /* Weights — restrained */ --weight-regular: 400; --weight-medium: 500; --weight-semi: 600; --weight-bold: 700; /* Line heights */ --leading-display: 0.92; /* tight for huge display */ --leading-snug: 1.1; --leading-body: 1.55; --leading-loose: 1.6; /* Tracking */ --track-display: -0.025em; /* tight on display serif */ --track-tight: -0.01em; /* on Inter wordmark */ --track-meta: 0.14em; /* on uppercase mono */ --track-meta-lg: 0.18em; /* on widely-spaced footer mono */ /* ─────────────── 03 · Spacing ─────────────── */ /* 4px base; the gutter (56px) anchors the page grid */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 48px; --space-10: 56px; /* page gutter, section padding */ --space-11: 64px; --space-12: 80px; --space-13: 96px; --space-14: 120px; --space-15: 140px; /* hero top-edge to H1 */ /* Semantic spacing (preferred in components) */ --gutter-page: var(--space-10); /* 56 */ --gutter-page-tablet: var(--space-9); /* 40 */ --gutter-page-mobile: var(--space-5); /* 20 */ --section-pad-y: var(--space-13); /* 96 */ --grid-cell: var(--space-10); /* 56 — page background grid */ /* ─────────────── 04 · Radius ─────────────── */ --radius-pill: 999px; /* CTA, chip, tag */ --radius-panel: 16px; /* large panel, card */ --radius-card: 12px; /* default card */ --radius-input: 8px; /* form, small chip */ --radius-tight: 4px; /* code, micro-tag */ /* ─────────────── 05 · Border weights ─────────────── */ --stroke-hairline: 1px; --stroke-rule: 1.5px; /* CTA outlines */ --stroke-emphasis: 3px; /* left-border on disclosure callouts */ /* ─────────────── 06 · Shadow / elevation ─────────────── */ /* All shadows tuned for the dark night ground; on paper, halve opacity. */ --shadow-eye: 0 50px 120px rgba(255, 140, 0, 0.22); /* hero mark glow */ --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.35); --shadow-cta: 0 2px 12px rgba(216, 154, 46, 0.35); --shadow-text: 0 4px 40px rgba(0, 0, 0, 0.5); /* H1 over photography */ --shadow-text-sm:0 2px 14px rgba(0, 0, 0, 0.6); /* body over photography */ /* ─────────────── 07 · Motion ─────────────── */ --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1); /* most UI transitions */ --ease-emphasis: cubic-bezier(0.4, 0, 0.2, 1); /* mode swap, slider release */ --duration-fast: 120ms; --duration-base: 240ms; --duration-slow: 480ms; --duration-reveal: 800ms; /* before/after wipe */ /* ─────────────── 08 · Layer (z-index) ─────────────── */ --z-base: 0; --z-content: 5; --z-nav: 10; --z-overlay: 50; --z-modal: 100; }