/* ════════════════════════════════════════════════════════════════════════ EDITORIAL DESIGN TOKENS · Hven "paper" design language · Slice 1 ──────────────────────────────────────────────────────────────────────── Editorial-warm direction: cream paper, espresso sidebar, single amber accent, Fraunces / Inter / JetBrains Mono. This is a SECOND token layer that will progressively replace the legacy warm-neutral system in src/shared/ui/styles.css over revamp slices 2–9. NAMESPACE: every token is prefixed `--ed-` (editorial). This is deliberate and load-bearing — styles.css already defines `--space-4`, `--color-text- primary`, `--font-sans`, `--radius-lg`, etc. Re-using those bare names here would silently override the live design system the instant this file loads and repaint the whole app. The `--ed-` prefix guarantees these tokens are INERT until a page explicitly opts in by consuming them (slices 2–9). THEME: light values live in :root; only the mode-dependent tokens (--ed-color-*, --ed-shadow-*) are redefined under [data-theme="dark"]. Mode-invariant tokens (fonts, spacing, radii, weights, sizes) are defined once in :root and are NOT duplicated in dark — there is nothing to flip. The pre-paint script in public/index.html sets [data-theme] before paint. ════════════════════════════════════════════════════════════════════════ */ /* ── Self-hosted fonts (latin subset, variable woff2) ───────────────────── One variable file per family covers every weight we use; Google serves a single latin file across the wght axis. url() is resolved relative to THIS file (public/design/), so the ../fonts/ path holds through the @import chain regardless of nginx doc-root. Non-latin codepoints fall back to the stack — acceptable for an English-first product UI. */ @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('../fonts/fraunces-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('../fonts/jetbrains-mono-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* ── COLOR · light ──────────────────────────────────────────────────── */ /* Surfaces */ --ed-color-bg-paper: #F4EFE7; /* page background — warm cream paper */ --ed-color-surface-raised: #FBF8F2; /* cards / raised panels */ --ed-color-sidebar: #1A1714; /* espresso inverse rail */ --ed-color-sidebar-raised: #2E2A20; /* active / hover item in sidebar */ /* Text */ --ed-color-text-primary: #1F1B16; --ed-color-text-secondary: #5C544A; --ed-color-text-muted: #8C8276; --ed-color-text-inverse: #F4EFE7; /* text on espresso / dark surfaces */ --ed-color-text-inverse-muted: #B8AE9F; /* Borders — editorial hairline weight (see --ed-border-width) */ --ed-color-border-subtle: #E5DFD3; --ed-color-border-default: #D0C8B8; /* Accent — single warm amber, SPLIT BY ROLE (Slice 2): • --ed-color-accent decorative only — logo mark, headline highlight, link underlines, pill fills, focus ring. The bright mockup amber; never carries body text on top of it. • --ed-color-accent-strong interactive surfaces that DO carry text (primary buttons): darkened so cream button text clears WCAG AA (~5.5:1). The plain amber + cream pairing was only ~2.9:1. */ --ed-color-accent: #C28842; --ed-color-accent-strong: #8A5A24; --ed-color-accent-strong-hover: #6F471B; --ed-color-accent-surface: #F5EDD9; /* pill / chip fill */ --ed-color-accent-on-surface: #7A5828; /* text on accent-surface */ --ed-color-accent-on-accent: #FBF8F2; /* text on filled amber */ /* Status */ --ed-color-success: #3DA66E; --ed-color-success-glow: rgba(61, 166, 110, 0.4); /* live-dot pulse */ --ed-color-danger: #B23A2E; /* form / validation errors (~5.6:1 on cream) */ /* Inverse panel — a dark espresso slab used as a hero/finale surface in BOTH modes (e.g. landing final-CTA). Light: espresso on cream — identical to the Slice 2 band. Dark: LIFTED to a warm mid-brown so it re-asserts contrast against the near-black page instead of vanishing. Text is cream-family in both modes, so it needs its own text tokens (the generic --ed-color-text- inverse-muted goes dark in dark mode and would be illegible here). */ --ed-color-bg-inverse-panel: #1A1714; --ed-color-text-inverse-panel: #F4EFE7; --ed-color-text-inverse-panel-muted: #B8AE9F; --ed-color-border-inverse-panel: transparent; /* Focus ring — amber, works on cream + espresso */ --ed-color-focus-ring: rgba(194, 136, 66, 0.55); /* ── SHADOW · light ─────────────────────────────────────────────────── */ /* Editorial = barely-there. Warm-tinted, never blue-grey. */ --ed-shadow-sm: 0 1px 2px rgba(31, 27, 22, 0.05); --ed-shadow-md: 0 4px 16px rgba(31, 27, 22, 0.07); --ed-shadow-lg: 0 16px 40px rgba(31, 27, 22, 0.10); /* ── TYPOGRAPHY (mode-invariant) ────────────────────────────────────── */ --ed-font-serif: 'Fraunces', Georgia, 'Times New Roman', serif; --ed-font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --ed-font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; --ed-weight-regular: 400; --ed-weight-medium: 500; --ed-weight-semibold: 600; --ed-weight-bold: 700; /* Type scale — size / paired line-height. Roles applied in primitives.css. */ --ed-font-size-display: 3.5rem; /* 56px — Fraunces, hero numerals */ --ed-line-display: 1.05; --ed-font-size-h1: 2.5rem; /* 40px */ --ed-line-h1: 1.1; --ed-font-size-h2: 1.75rem; /* 28px */ --ed-line-h2: 1.15; --ed-font-size-h3: 1.25rem; /* 20px */ --ed-line-h3: 1.25; --ed-font-size-body: 1rem; /* 16px — Inter */ --ed-line-body: 1.5; --ed-font-size-body-sm: 0.875rem; /* 14px */ --ed-font-size-caption: 0.8125rem; /* 13px */ --ed-font-size-label: 0.625rem; /* 10px — mono small-caps */ --ed-font-size-breadcrumb: 0.6875rem; /* 11px — mono */ --ed-font-size-metric: 2.75rem; /* 44px — Fraunces 500 metric numerals */ --ed-tracking-display: -0.03em; --ed-tracking-heading: -0.02em; --ed-tracking-label: 0.1em; --ed-tracking-crumb: 0.04em; /* ── SPACING (mode-invariant) — tight editorial scale, named by px ───── */ --ed-space-2: 2px; --ed-space-4: 4px; --ed-space-6: 6px; --ed-space-8: 8px; --ed-space-10: 10px; --ed-space-12: 12px; --ed-space-14: 14px; --ed-space-16: 16px; --ed-space-20: 20px; --ed-space-24: 24px; --ed-space-32: 32px; --ed-space-40: 40px; /* ── RADII (mode-invariant) ─────────────────────────────────────────── */ --ed-radius-sm: 6px; /* buttons, pills */ --ed-radius-md: 10px; /* cards */ --ed-radius-lg: 14px; /* large panels */ --ed-radius-full: 999px; /* ── BORDERS (mode-invariant) ───────────────────────────────────────── */ --ed-border-width: 0.5px; /* the thin editorial weight, not 1px */ } [data-theme="dark"] { /* ── COLOR · dark ─────────────────────────────────────────────────────── Not an inversion. The goal is the same editorial-premium feeling at night: warm browns instead of cool greys, the amber accent preserved. Per-token rationale below where the choice isn't a straight read of the light value. */ /* Surfaces — page is the darkest; panels lift toward warm brown. In dark mode there is no "inverse" panel, so the sidebar becomes a warm rail one step above the page rather than a light-on-dark flip. */ --ed-color-bg-paper: #14110D; /* deep warm near-black (espresso ink) */ --ed-color-surface-raised: #211C16; /* cards lift one warm step */ --ed-color-sidebar: #1A1611; /* warm rail, between page and raised */ --ed-color-sidebar-raised: #2B251D; /* active / hover item in sidebar */ /* Text — cream family on dark. Secondary/muted desaturated for legibility. */ --ed-color-text-primary: #F4EFE7; --ed-color-text-secondary: #C9BFB0; --ed-color-text-muted: #9A8F80; /* lifted vs light #8C8276 for AA on dark */ --ed-color-text-inverse: #1F1B16; /* "inverse" flips meaning: dark text for light chips */ --ed-color-text-inverse-muted: #5C544A; /* Borders — warm, low-contrast hairlines. */ --ed-color-border-subtle: #2A241C; --ed-color-border-default: #3A332A; /* Accent — amber held, nudged lighter so it lifts off the dark bg. In dark mode the primary button already uses dark-text-on-light-amber (AA), so accent-strong converges with the decorative accent; only hover lightens. */ --ed-color-accent: #D29A55; /* +lightness vs #C28842 for contrast on dark */ --ed-color-accent-strong: #D29A55; /* = accent: dark-text pairing is already AA */ --ed-color-accent-strong-hover: #E0AC68; /* lighten on hover (dark text stays readable) */ --ed-color-accent-surface: #2E2615; /* deep amber-brown so pills still read amber-tinted */ --ed-color-accent-on-surface: #E8C188; /* light amber text on the dark amber surface */ --ed-color-accent-on-accent: #20190F; /* dark text on the lighter amber fill (cream would fail contrast here) */ /* Status — held per spec; reads fine on warm-dark bg. */ --ed-color-success: #3DA66E; --ed-color-success-glow: rgba(61, 166, 110, 0.45); --ed-color-danger: #E89384; /* light warm red for errors on dark surfaces */ /* Inverse panel — lifted warm-brown slab so it pops on the near-black page (see the :root note). Text stays cream-family. */ --ed-color-bg-inverse-panel: #33291B; --ed-color-text-inverse-panel: #F4EFE7; --ed-color-text-inverse-panel-muted: #C9BFB0; --ed-color-border-inverse-panel: #4A3E2A; --ed-color-focus-ring: rgba(210, 154, 85, 0.6); /* ── SHADOW · dark — light shadows vanish on dark; deepen + warm them. ── */ --ed-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --ed-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5); --ed-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.6); }