/* ══════════════════════════════════════════════════════════════════════════════
   Paper / cream tokens — single source of truth
   ══════════════════════════════════════════════════════════════════════════════
   Extracted from design-tokens.css + editorial.css on 2026-05-31 (PR #464) so
   the cream palette lives in exactly one file. Both design-tokens.css and
   editorial.css now @import this file at the top of their :root blocks.

   Consumers (transitively):
     - Every marketing page (via editorial.css @import)
     - The SPA shell — app-spa.html (via design-tokens.css @import)
     - Admin-v2 — body.v2 retokens these onto the legacy --bg/--text names
       (via design-tokens.css @import through admin/admin.css)
     - Admin-v1 — loads design-tokens.css but doesn't use these tokens
       (kept available for any future migration; zero runtime cost)

   To change a cream color: edit this file. One line, one source.

   Do NOT duplicate these definitions in design-tokens.css or editorial.css.
   The whole point of this file is to fix the prior sync-by-comment hazard.
   ══════════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Paper backgrounds ─────────────────────────────────────────────────────
     Warm cream, two tiers. Closest to Claude.ai's marketing aesthetic.       */
  --paper:    #f4f2ef;  /* Page background                                    */
  --paper-2:  #ebe9e4;  /* Hairlines, dividers, raised surfaces               */

  /* ── Ink (text on paper) ───────────────────────────────────────────────────
     Four tiers from darkest to lightest. Tuned for the cream background so
     contrast feels intentional at each level.                                */
  --ink:    #000;     /* Primary headings, body text                          */
  --ink-2:  #2a2a2a;  /* Secondary text                                       */
  --ink-3:  #666666;  /* Tertiary, captions (AA: 5.14:1 on cream)             */
  --ink-4:  #a0a0a0;  /* Quaternary, placeholders                             */

  /* ── Lines on paper ────────────────────────────────────────────────────────
     Opacity-based so they read on any cream background; black not white so
     they're visible on cream (the --border in design-tokens.css is white on
     dark and doesn't apply here).                                            */
  --line:    rgba(0,0,0,0.08);  /* Default subtle line                        */
  --line-2:  rgba(0,0,0,0.14);  /* Emphasized line, hover states              */

  /* ── Paper accent ──────────────────────────────────────────────────────────
     Warm coral. Used sparingly for highlights, focus rings, urgency.
     Namespaced (--paper-accent rather than --accent) because plans.html
     uses an undefined var(--accent) that would silently inherit a global
     value if we landed on the shorter name. The --accent alias below maps
     to --paper-accent for the editorial.css naming convention.               */
  --paper-accent:    #c96442;  /* Anthropic-ish warm coral                    */
  --paper-accent-d:  #b35538;  /* Darker variant for errors and dense states  */

  /* ── Serif typography ──────────────────────────────────────────────────────
     System serif stack. No web fonts. Used for headings on paper surfaces.
     LEGACY: kept for pages that haven't migrated to the new design language
     yet (dashboard.html, admin). New SPA + landing-page surfaces use
     --paper-sans (Figtree) for headlines instead.                            */
  --serif: 'Tiempos Headline', 'Cambria', Georgia, 'Times New Roman', serif;

  /* ── Paper-theme webfont tokens ─────────────────────────────────────────────
     Calibrated 1-1 to the Framer reference. Figtree (free Google Font) is
     the primary sans — body + headlines + nav. Reckless Light (paid Displaay
     font) is the transitional-serif accent used sparingly (currently only
     the home hero subhead); Newsreader is the free Google Font fallback.

     Pages that adopt these tokens must also load the fonts. The cream
     home (front-end/index.html), app-spa.html, and the editorial pages
     do this via a <link rel="stylesheet" href="/fonts.css"> tag —
     self-hosted woff2 under /fonts/* since PR #293.

     Swap order on font-family declarations: list webfont first, then system
     fallback. The "Placeholder" variants Framer uses are absent here — we
     accept brief FOUT instead of carrying ~6 KB of CSS just for FOIT.        */
  --paper-sans:        'Figtree', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --paper-serif-accent:'Reckless Light', 'Newsreader', 'Iowan Old Style', Georgia, serif;

  /* ── Aliases (match editorial.css token names) ─────────────────────────────
     editorial.css uses --sans / --serif-accent / --accent. Pages that load
     this file (directly or transitively) can use either name.                */
  --sans:         var(--paper-sans);
  --serif-accent: var(--paper-serif-accent);
  --accent:       var(--paper-accent);
}