/* ─────────────────────────────────────────────────────────────────────────
 * GENERATED FILE — DO NOT EDIT.
 * Copied verbatim from web/src/ui/tokens.css (THE single source of branding) by
 * scripts/sync-landing-tokens.sh. Edit the canonical file, then re-run the script.
 * Drift is gated in CI/quality review via: scripts/sync-landing-tokens.sh --check
 * ───────────────────────────────────────────────────────────────────────── */

/*
 * tokens.css - Semparo "First Light" design tokens.
 *
 * THE SINGLE SOURCE OF BRANDING. Every color, font, space, radius, shadow and
 * motion value in the app derives from here. Components reference the SEMANTIC
 * tokens (--color-ink, --space-4 …) - never the raw palette, never a hex literal.
 *
 * Values are taken from the approved "First Light - Full App" mockup
 * (Claude Design project 479771c1-…). See docs/ai/ui-development-guardrails.md §2.
 *
 * Dark mode: the semantic layer is intentionally separable from the palette so a
 * [data-theme="dark"] block can re-map the semantic tokens later. Ship light first.
 */

:root {
  /* ── Primitive palette (raw; do NOT use directly in components) ──────────── */
  --palette-ground:        #FBF7EF; /* warm ivory page */
  --palette-ground-sunk:   #F4EEE3; /* deeper cream (insets, sunken areas) */
  --palette-ground-warm:   #F3E9D9;
  --palette-white:         #FFFFFF;
  --palette-warm-white:    #FFFDF9; /* card surface, barely-warm white */

  --palette-ink:           #2B2620; /* primary text - warm near-black */
  --palette-ink-strong:    #241E18; /* headings - darkest warm near-black (handoff TOKENS.md) */
  --palette-ink-muted:     #7A6F60; /* secondary text */
  --palette-ink-subtle:    #9A8F7D; /* tertiary text, captions */
  --palette-ink-label:     #5A5347; /* form-field labels (handoff: Email/Password label ink) */

  --palette-brass:         #B6852F; /* accent - "always ready" */
  --palette-brass-strong:  #8A6A2A;
  --palette-brass-ink:     #5A4A23; /* strong heading ink on brass-tint panels (handoff) */
  --palette-brass-tint:    #F3E8D4; /* brass-tinted fill - chips, ghost hover, keepsake panels (handoff) */
  --palette-brass-line:    #E3D2AF; /* border for brass-tinted cards (mockup) */

  --palette-sage:          #5E7A52; /* safe · confirmed · alive */
  --palette-sage-strong:   #46603C;
  --palette-sage-tint:     #E5ECDD;
  --palette-sage-line:     #CDD9C1; /* border for sage-tinted cards (mockup) */

  --palette-clay:          #B14A2E; /* release in progress · alert · abort */
  --palette-clay-strong:   #8F3A22;
  --palette-clay-tint:     #F8E9E1;

  --palette-amber:         #C0853C; /* caution - distinct from brass accent + clay alert */
  --palette-amber-strong:  #8A5A1A;
  --palette-amber-tint:    #F6E2C2;
  --palette-amber-line:    #E3C486;

  --palette-ink-raised:    #38302A; /* raised inverse surface (cards on dark) */
  --palette-ink-on-dark-muted: #C9BBA6; /* secondary text on dark */

  --palette-line:          #E7DCCA; /* warm hairline border */
  --palette-line-strong:   #D8C8AA;

  /* ── Semantic colors (THIS is what components use) ──────────────────────── */
  /* Surface hierarchy per the official handoff TOKENS.md - follow the tokens, not the mockup's
     raw cream hexes: page = ivory #FBF7EF, cards = barely-warm white #FFFDF9 (lift off the page
     on soft warm shadows), header/raised insets = white #FFFFFF, sunken insets = deeper cream. */
  --color-bg:            var(--palette-ground);      /* page = warm ivory #FBF7EF */
  --color-bg-sunk:       var(--palette-ground-sunk); /* deeper cream - sunken rows, insets */
  --color-surface:       var(--palette-warm-white);  /* cards = barely-warm white #FFFDF9 */
  --color-surface-raised:var(--palette-white);       /* header / raised insets = white #FFFFFF */

  --color-ink:           var(--palette-ink);
  --color-ink-strong:    var(--palette-ink-strong);
  --color-ink-muted:     var(--palette-ink-muted);
  --color-ink-subtle:    var(--palette-ink-subtle);
  --color-ink-label:     var(--palette-ink-label);  /* form-field labels */

  --color-accent:        var(--palette-brass);
  --color-accent-strong: var(--palette-brass-strong);
  --color-accent-bg:     var(--palette-brass-tint);
  --color-accent-border: var(--palette-brass-line); /* soft border for brass-tinted cards */
  --color-accent-ink:    var(--palette-brass-ink);  /* heading ink on brass-tint panels */
  --color-on-accent:     var(--palette-white);

  --color-safe:          var(--palette-sage);
  --color-safe-strong:   var(--palette-sage-strong);
  --color-safe-bg:       var(--palette-sage-tint);
  --color-safe-border:   var(--palette-sage-line); /* soft border for sage-tinted cards */

  --color-alert:         var(--palette-clay);
  --color-alert-strong:  var(--palette-clay-strong);
  --color-alert-bg:      var(--palette-clay-tint);

  /* Caution - a warmer amber than the brass accent, for "be careful" (not "error"). */
  --color-caution:        var(--palette-amber);
  --color-caution-strong: var(--palette-amber-strong);
  --color-caution-bg:     var(--palette-amber-tint);
  --color-caution-border: var(--palette-amber-line);

  /* Inverse / dark media surfaces (founder welcome, video frames, admin top bar). */
  --color-surface-inverse:      var(--palette-ink);            /* #2B2620 */
  --color-surface-inverse-2:    var(--palette-ink-raised);     /* raised inverse */
  --color-ink-on-inverse:       var(--palette-ground-warm);    /* primary text on dark */
  --color-ink-on-inverse-muted: var(--palette-ink-on-dark-muted);

  --color-border:        var(--palette-line);
  --color-border-strong: var(--palette-line-strong);

  --color-focus-ring:    var(--palette-brass);
  --color-overlay:       rgba(36, 30, 24, 0.45);

  /* ── Type ───────────────────────────────────────────────────────────────── */
  --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-sans:    'Mulish', 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --text-label:   0.78rem; /* form-field labels (between xs and sm — a named, intentional value) */
  --text-xs:      0.75rem;
  --text-sm:      0.875rem;
  --text-base:    1rem;
  --text-lg:      1.125rem;
  --text-xl:      1.375rem;
  --text-2xl:     1.75rem;
  --text-3xl:     2.25rem;
  --text-display: 2.75rem;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --leading-tight:   1.2;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* ── Spacing (4px base) ─────────────────────────────────────────────────── */
  --space-0:  0;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* ── Radius ─────────────────────────────────────────────────────────────── */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-pill: 999px;

  /* ── Shadow (soft, warm-tinted - keepsake, not material) ────────────────── */
  --shadow-sm: 0 1px 2px rgba(74, 58, 35, 0.06);
  --shadow-md: 0 4px 14px rgba(74, 58, 35, 0.08);
  --shadow-lg: 0 12px 32px rgba(74, 58, 35, 0.12);

  /* ── Motion ─────────────────────────────────────────────────────────────── */
  --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);
  --duration-fast:   120ms;
  --duration-normal: 220ms;

  /* ── Layout ─────────────────────────────────────────────────────────────── */
  --nav-width:      232px;
  --topbar-height:  60px;
  --content-max:    1080px;
  --reading-max:    640px;
}