/* ============================================================================
   tokens.css — every colour, size and motion value in the product.

   THIS IS THE ONLY FILE ALLOWED TO CONTAIN A COLOUR LITERAL (contract rule 4
   in js/ui.js). Everything else — base.css, components.css, pages.css,
   ink.css, print.css and every page module — reads from these custom
   properties, never from a hex code.

   PHASE 0 STATUS: this is the "Sakura Dawn" preview swatch from
   docs/DESIGN-SYSTEM.md §2 — seed {hue:350, chroma:0.065, mode:light},
   hand-interpolated from teacher-binder/js/theme.js's real baked presets as a
   close-enough-to-art-direct approximation. It is NOT yet run through the
   actual derive() engine (Agent A, Phase 5 — see that file's header for the
   OKLCH algorithm this product will port) and must be regenerated from the
   real engine before shipping, per that doc's explicit warning. Until then
   this file IS the theme: warm neutral surfaces (oat / cream / stone) with
   the sakura pink held back as a single accent, never the whole background.

   THE --sakura FIX (docs/DESIGN-SYSTEM.md §2): the future derive() engine
   ties --bg/--surface tint to the same hue as --brand, so a buyer who picks
   a non-pink seed (Matcha & Stone, Koi Pond...) would otherwise have no
   cherry-blossom pink left anywhere. --sakura/--sakura-soft are a FIXED
   accent — same mechanism as --mint/--danger below, hue never rotates with
   the brand seed — reserved for petal motifs, the mood-tracker fill, and the
   hanko stamp regardless of which of the 6 palettes is active.
   ============================================================================ */

:root {
  color-scheme: light;

  /* -- Surfaces --------------------------------------------------------------
     bg is the desk the journal sits on; surface is the page. surface-2/-3 are
     progressively deeper tints for headers, wells and hover states.
     Sakura Dawn preview swatch, docs/DESIGN-SYSTEM.md §2. */
  --bg:          #FBF6F5;
  --bg-tint:     #F7EDEC;
  --surface:     #FFFDFC;
  --surface-2:   #FCF6F5;
  --surface-3:   #F5EAE8;

  /* -- Ink -------------------------------------------------------------------
     Solved at >=12:1 on --surface-3 by the real engine (AAA); this preview
     value is hand-interpolated to match. */
  --ink:         #3B2C2C;
  --ink-soft:    #7A6362;
  --ink-faint:   #A99190;

  /* -- Lines -------------------------------------------------------------- */
  --line:        #F2DEDA;
  --line-strong: #C7A6A2;

  /* -- Brand / accent -------------------------------------------------------
     The single warm accent Japandi asks for. --brand is Sakura Dawn's own
     seed hue (this is the one palette where --brand and --sakura sit close
     together on purpose — see --sakura below); --on-brand is picked for
     contrast rather than assumed white, matching the future engine's rule 5. */
  --brand:        #C67A8D;
  --brand-strong: #A0576B;
  --brand-soft:   #FBE6E9;
  --brand-tint:   #FBE6E9;
  --on-brand:     #FFFFFF;

  /* -- Fixed sakura accent (docs/DESIGN-SYSTEM.md §2) -------------------------
     Independent of --brand and of whichever of the 6 palettes is active —
     same fixed-hue mechanism as --mint/--danger below. Reserved for petal
     motifs, the mood-tracker fill and the hanko stamp, so cherry-blossom pink
     stays present even on a buyer's non-pink theme choice. */
  --sakura:      #C2517A;
  --sakura-soft: #FCE3EA;

  /* -- Semantic (do not rotate with brand/hue) ------------------------------ */
  --mint:        #7C9A82;   /* success / done */
  --amber:       #C9974C;   /* warning / streak-at-risk */
  --danger:      #B4534A;   /* delete / overdue */
  --info:        #6E8AA6;   /* neutral callouts */
  --hanko:       #BD2D2B;   /* fixed vermilion seal-stamp red, used by the Sumi Ink palette as --brand */

  /* -- Section hue ladder ----------------------------------------------------
     Slot index, never a colour — see js/ui.js MODULES[].hue. Placeholder
     single-hue set until the OKLCH engine derives one per seed. */
  --sec-0:  var(--brand);
  --sec-1:  #B98A5A;
  --sec-2:  #C6667C;
  --sec-3:  #8C8455;
  --sec-4:  #6E8AA6;
  --sec-5:  #7C9A82;
  --sec-6:  #A67C8E;
  --sec-7:  #C9974C;
  --sec-8:  #6E9A8E;
  --sec-9:  #9C7CA6;
  --sec-10: #8C6E5C;

  /* -- Ink layer (pencil colour choices, js/ink.js) -------------------------- */
  --ink-pen-default: #2B2230;
  --ink-pen-sepia:   #6B4A3A;
  --ink-highlight:   rgba(230, 180, 60, 0.35);

  /* -- Typography (docs/DESIGN-SYSTEM.md §3) ----------------------------------
     Four faces, one job each. --font-display/--font-ui load via Google Fonts
     in index.html for Phase 0-4 development only — Agent A self-hosts both as
     subsetted woff2 under assets/fonts/ in Phase 5 and drops that CDN link,
     per this repo's no-runtime-CDN rule. --font-hand copies
     teacher-binder/assets/fonts/caveat-latin*.woff2 verbatim once that phase
     lands; until then it falls back through the stack below. */
  --font-display: 'Shippori Mincho', 'Yu Mincho', 'Hiragino Mincho ProN', 'Playfair Display', serif;
  --font-hand:    'Caveat', 'Segoe Script', cursive;
  --font-ui:      'Zen Maru Gothic', 'Hiragino Maru Gothic ProN', 'Quicksand', ui-rounded, sans-serif;
  --font-body:    'Lora', 'Yu Mincho', Georgia, serif;

  /* -- Radii / spacing / motion ---------------------------------------------- */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;
  --space-4: 16px; --space-5: 24px; --space-6: 32px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: 180ms;

  /* -- Print (see css/print.css) --------------------------------------------- */
  --print-ink:      #1F1A1D;
  --print-surface:  #FFFFFF;
  --print-line:     #CBBAC0;
}

/* Dark mode uses "Midnight Lantern" (docs/DESIGN-SYSTEM.md §2, seed
   {hue:28, chroma:0.11, mode:dark}) rather than a dimmed Sakura Dawn — a
   warm charcoal with a glowing vermilion-lantern brand, solved at >=9:1
   ink-on-surface-3 (the engine's dark-mode AAA floor) instead of light
   mode's 12:1. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:          #17110E;
  --bg-tint:     #1F1712;
  --surface:     #241C18;
  --surface-2:   #2E2320;
  --surface-3:   #3B2C27;

  --ink:         #F4E4DC;
  --ink-soft:    #C0A89D;
  --ink-faint:   #93807A;

  --line:        #4A342C;
  --line-strong: #8C6355;

  --brand:        #E37A52;
  --brand-strong: #F0A183;
  --brand-soft:   #3A241C;
  --brand-tint:   #3A241C;
  --on-brand:     #1A0D08;

  --sakura:      #FF9DBE;
  --sakura-soft: #3A1E28;
}

@media print {
  /* Ink-saver is the DEFAULT print palette (matches teacher-binder's rule):
     html:not([data-print-mode="color"]) remaps ink/surface with !important.
     Because theme.js (Phase 5) will write these as INLINE custom properties
     on :root, an attribute selector alone will not be specific enough to win
     — the override must land on the custom property itself. See css/print.css
     for the full rule and the trap it documents. */
  html:not([data-print-mode="color"]) {
    --ink: var(--print-ink) !important;
    --surface: var(--print-surface) !important;
    --line: var(--print-line) !important;
    --brand: var(--print-ink) !important;
  }
}