/* ============================================================================
   tokens.css — Oyang Archive
   The one vocabulary. Loaded FIRST; everything else may use these names.
   Rules and reasons: DESIGN.md ("The Scholar's Studio 書齋").

   Two families of colour:
     1. THE ROOM follows the year. Roles below resolve to the 五行 palette of
        the running phase (phases.css: --p-* light, --d-* dark). phases.css
        stays the only place a phase colour is defined. The hex after each
        comma is the original pre-phase palette, used only if phase.js never ran.
     2. THE MATERIALS do not change with the phase: paper is paper, wood is
        wood. In dark mode the lamp is low — the sheet dims but stays warm.

   Nothing in here paints anything by itself. Until the rework reaches a file,
   that file keeps its own names (--lib-*, --yu-*, --gl-* …); they are moved
   onto these roles family by family and then deleted.
   ============================================================================ */
:root {
  /* --- the room (phase) -------------------------------------------------- */
  --bg:          var(--p-bg,    #f6f5f2);
  --leaf:        var(--p-surf,  #ffffff);
  --leaf-2:      var(--p-surf2, #f3efe7);
  --leaf-3:      var(--p-surf3, #e4e0d8);
  --panel:       var(--p-panel, #14110f);
  --ink-1:       var(--p-t1,    #14110f);
  --ink-2:       var(--p-t2,    #4b4540);
  --ink-3:       var(--p-t3,    #6b6359);
  --ink-deco:    var(--p-t4,    #bdb6ac);   /* never for text: fails contrast */
  --accent:      var(--p-acc,   #9e2b25);
  --accent-2:    var(--p-acc2,  #b23a33);
  --wen:         var(--p-wen,   #2f4a6b);
  --xiu:         var(--p-xiu,   #1c502c);
  --yu:          var(--p-yu,    #4c2a56);
  --rule:        var(--p-bd,    #e4e0d8);
  --rule-strong: var(--p-bds,   #cfc8bd);
  --on-accent:   #fbf7ee;                   /* cream lettering on the seal */
  --on-panel:    #f3efe7;                   /* text on the dark panel (footer); dark in both themes */
  --on-panel-2:  #a9a093;                   /* 7:1 on the panel */

  /* --- the materials (constant) ------------------------------------------ */
  --sheet:       #f8f3e6;   /* xuan paper */
  --sheet-edge:  #e4dac3;
  --sheet-ink:   #1d1812;
  --sheet-ink-2: #4a4034;
  --sheet-ink-3: #6b5f4f;
  --desk:        #5b4330;   /* desk wood */
  --desk-hi:     #6c513a;
  --desk-lo:     #3f2e20;
  --on-desk:     #efe3c8;
  --bam-hi:      #e2c78d;   /* bamboo */
  --bam-mid:     #cba86a;
  --bam-lo:      #b18f4f;
  --bam-ink:     #211a10;
  --cord:        #6e4a2a;
  --cloth-mix:   #14110f;   /* what a book's cloth is shaded toward */

  /* --- the materials' surface: scanned grain, laid over the colours above ---
     Greyscale tiles (CC0, ambientCG: Paper 001, Wood 095, Fabric 081 C; see the
     colophon), multiplied onto whatever colour the surface has, so one tile
     serves both themes and every ink. url() in a custom property resolves
     against THIS file, which sits next to assets/. */
  --tex-paper: url("assets/tex/paper.webp");
  --tex-wood:  url("assets/tex/wood.webp");
  --tex-cloth: url("assets/tex/cloth.webp");

  /* --- type: ten steps, nothing between ---------------------------------- */
  --fs-13: .8125rem;  --fs-14: .875rem;  --fs-16: 1rem;      --fs-18: 1.125rem;
  --fs-21: 1.3125rem; --fs-26: 1.625rem; --fs-34: 2.125rem;  --fs-46: 2.875rem;
  --fs-62: 3.875rem;  --fs-80: 5rem;
  --font-display: 'Spectral', Georgia, serif;
  --font-body:    'Source Serif 4', Georgia, serif;
  --font-han:     'Noto Serif TC', serif;
  --font-ui:      'Inter', system-ui, sans-serif;   /* controls and table data only */
  --lh-body: 1.7;
  /* in rem, not ch: ch depends on the element's own font-size, and the same
     measure has to hold for a 13px table wrapper and an 18px paragraph.
     37.5rem is about 68 characters of 18px Source Serif. */
  --measure: 37.5rem;  --measure-wide: 44rem;
  --track-tight: -.012em;  --track-han: .12em;

  /* --- space ------------------------------------------------------------- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 72px; --s9: 112px; --s10: 160px;

  /* --- shape ------------------------------------------------------------- */
  --r-sheet: 1px;  --r-sm: 2px;  --r-md: 3px;

  /* --- depth: one shadow, for things that lie on something ---------------- */
  --lift: 0 1px 0 rgba(255,255,255,.5) inset,
          0 10px 22px -12px rgba(30,20,10,.45),
          0 2px 4px -1px rgba(30,20,10,.22);

  /* --- motion: slow and even, never springy ------------------------------- */
  --dur-1: 140ms;  --dur-2: 320ms;  --dur-3: 600ms;
  --ease-enter: cubic-bezier(.22, 1, .36, 1);
  --ease-move:  cubic-bezier(.4, 0, .2, 1);
}

html[data-theme="dark"] {
  --bg:          var(--d-bg);
  --leaf:        var(--d-surface);
  --leaf-2:      var(--d-surface-2);
  --leaf-3:      var(--d-surface-3);
  --panel:       var(--d-panel);
  --ink-1:       var(--d-text);
  --ink-2:       var(--d-text-2);
  --ink-3:       var(--d-text-3);
  --ink-deco:    var(--d-text-4);
  --accent:      var(--d-accent);
  --accent-2:    var(--d-accent-strong);
  --wen:         var(--d-wen);
  --xiu:         var(--d-xiu);
  --yu:          var(--d-yu);
  --rule:        var(--d-border);
  --rule-strong: var(--d-border-strong);
  --on-accent:   #17100a;

  --sheet:       #2b251c;
  --sheet-edge:  #3a3226;
  --sheet-ink:   #efe6d4;
  --sheet-ink-2: #cdbfa6;
  --sheet-ink-3: #a39780;
  --desk:        #241a12;
  --desk-hi:     #2e2218;
  --desk-lo:     #17100a;
  --on-desk:     #d9ccb0;
  --bam-hi:      #c7a664;
  --bam-mid:     #a9853f;
  --bam-lo:      #7f612c;
  --bam-ink:     #160f06;
  --cord:        #4a3018;
  --cloth-mix:   #0c0a08;
  --lift: 0 1px 0 rgba(255,255,255,.06) inset,
          0 14px 26px -12px rgba(0,0,0,.7),
          0 2px 4px -1px rgba(0,0,0,.5);
}