/* =====================================================================
   Atelier · design tokens
   Quiet luxury, set like a lookbook: porcelain pages, deep ink, one rich
   accent, hairline rules and long panels of stone, wood and cloth drawn
   in canvas. "Evening" is the dark mode: deep ink with a brass accent.
   The closing band is always evening (--evening*).
   Dark mode follows the visitor's system setting unless <html> carries
   data-theme="light" | "dark" (the nav's Evening switch sets it).
   Keep in sync with tokens.json (scripts/sync-tokens.mjs copies this file
   into template/css/tokens.css).
   ===================================================================== */
:root {
  /* ---- pages ---- */
  --bg: #f0f1ee;            /* porcelain: cool, never cream */
  --paper: #f8f8f6;         /* raised plates, open FAQ, menu */
  --stone: #e2e1dc;         /* warm stone grounds behind sample boards */
  --ink: #15181d;           /* deep ink: headlines, primary button */
  --ink-2: #3d4149;         /* body copy */
  --muted: #5c6068;         /* captions, labels; AA on --bg and --stone */
  --rule: #cacbc6;          /* hairlines */
  --rule-2: #9fa19b;        /* stronger hairlines: hover, active, table heads */

  /* ---- the one accent (dial) ---- */
  --accent: #1e4a3a;        /* bottle green: the italic word, numerals, links */
  --accent-2: #2c6650;      /* hover */
  --accent-soft: #dce4de;   /* selection, quiet fills */
  --on-accent: #f3f3ef;
  --velvet: #1e4a3a;        /* the cloth panel; stays deep in both modes so ivory reads on it */

  /* ---- metal: used sparingly (the closing ring, evening italics) ---- */
  --brass: #a6834b;         /* solid brass; large or decorative only on light (3.1:1) */
  --metal: linear-gradient(100deg, #7a5c30 0%, #c9a96b 26%, #f0dca8 44%, #b38d52 62%, #7f6134 80%, #c9a96b 100%);

  /* ---- materials (canvas panels read these) ---- */
  --marble: #ebe8e2;        /* Calacatta ground */
  --vein: #6e6a64;          /* marble veining */
  --travertine: #d8cbb6;
  --oak: #b28f66;
  --linen: #dcd6cb;
  --plaster: #e4e1da;       /* limewash walls */

  /* ---- evening band (closing, always dark) ---- */
  --evening: #101318;
  --evening-ink: #edebe5;
  --evening-muted: #a7a59e; /* 7.5:1 on --evening */

  /* ---- depth ---- */
  --shadow-plate: 0 50px 90px -60px rgba(21, 24, 29, 0.55), 0 18px 40px -30px rgba(21, 24, 29, 0.25);
  --shadow-lift: 0 30px 60px -36px rgba(21, 24, 29, 0.5);

  /* ---- type ---- */
  --display: "Bodoni Moda", "Didot", "Bodoni 72", "Times New Roman", serif;
  --ui: "Hanken Grotesk", "Helvetica Neue", Arial, system-ui, sans-serif;
  --fs-display: clamp(46px, 11.4vw, 178px);  /* hero, weight 400, opsz 96 */
  --fs-h2: clamp(40px, 6.2vw, 98px);
  --fs-close: clamp(48px, 9vw, 150px);       /* the closing headline */
  --fs-numeral: clamp(76px, 12vw, 196px);    /* chapter numerals */
  --fs-h3: clamp(24px, 2.3vw, 34px);
  --fs-lead: clamp(17px, 1.3vw, 19.5px);
  --fs-body: 15.5px;
  --fs-caption: 13.5px;     /* small caps captions */
  --fs-label: 11px;         /* tracked uppercase labels */

  /* ---- space ---- */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 40px;
  --s-7: 64px; --s-8: 96px; --s-9: 160px; --s-10: 220px;
  --wrap: 1320px;
  --gutter: clamp(20px, 4.2vw, 60px);
  --content: 34ch;          /* lead paragraphs stay short */

  /* ---- shape ---- */
  --r-none: 0px;            /* panels, plates, buttons: square */
  --r-hair: 2px;            /* swatches, focus */
  --r-round: 999px;         /* the circular CTA, cursor ring, switches */

  /* ---- motion: slow and expensive ---- */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --d-curtain: 1.35s;       /* headline lines rise out of their masks */
  --d-settle: 1.8s;         /* panels unveil and settle from 1.12 scale */
  --d-hover: 0.7s;          /* button fills, rule draws */
  --stagger: 120ms;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e1115; --paper: #151920; --stone: #1b2028; --ink: #eceae4; --ink-2: #c5c3bc; --muted: #9b9a94; --rule: #2a2f37; --rule-2: #464c55;
    --accent: #c8a66a; --accent-2: #e0c48c; --accent-soft: #2a251b; --on-accent: #121417; --velvet: #183a2e;
    --marble: #17191c; --vein: #cfcac0; --travertine: #3a342b; --oak: #4a3a2a; --linen: #2b2a27; --plaster: #23262b;
    --evening: #08090c;
    --shadow-plate: 0 50px 90px -50px rgba(0, 0, 0, 0.85); --shadow-lift: 0 30px 60px -30px rgba(0, 0, 0, 0.8);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0e1115; --paper: #151920; --stone: #1b2028; --ink: #eceae4; --ink-2: #c5c3bc; --muted: #9b9a94; --rule: #2a2f37; --rule-2: #464c55;
  --accent: #c8a66a; --accent-2: #e0c48c; --accent-soft: #2a251b; --on-accent: #121417; --velvet: #183a2e;
  --marble: #17191c; --vein: #cfcac0; --travertine: #3a342b; --oak: #4a3a2a; --linen: #2b2a27; --plaster: #23262b;
  --evening: #08090c;
  --shadow-plate: 0 50px 90px -50px rgba(0, 0, 0, 0.85); --shadow-lift: 0 30px 60px -30px rgba(0, 0, 0, 0.8);
  color-scheme: dark;
}