/* ============================================================
   Long Lane Furniture — design tokens (single source of truth)
   Archetype C — Editorial single-column.
   Direction rationale (each traces to dossier.md):
   - Warm hardwood palette (walnut / cherry / oak / honey) because
     they work solid Cherry, Walnut, Oak, Hickory, Maple & Quarter
     Sawn White Oak — heirloom wood, not composite.
   - Fraunces old-style serif display: crafted, human, heirloom —
     restraint reads as quality for a 25-year Amish family shop.
   - No navy/tech accents; the wood IS the brand. IV cyan appears
     ONLY in the discreet "Built by Intense Visions" chrome.
   ============================================================ */

/* Self-hosted display face — preloaded + subset → font-display: optional
   so a late swap never reflows headings (CLS trap). */
@font-face {
  font-family: "Fraunces";
  src: url("assets/fraunces-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: optional;
}
@font-face {
  font-family: "Fraunces";
  src: url("assets/fraunces-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: optional;
}
@font-face {
  font-family: "Fraunces";
  src: url("assets/fraunces-900.woff2") format("woff2");
  font-weight: 900; font-style: normal; font-display: optional;
}

:root {
  /* — Type families — */
  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* — Fluid type scale (editorial, 1.25 major-third-ish, generous) — */
  --step--1: clamp(0.83rem, 0.79rem + 0.2vw, 0.95rem);
  --step-0:  clamp(1.05rem, 1.0rem + 0.28vw, 1.2rem);
  --step-sub: clamp(1.08rem, 1.0rem + 0.4vw, 1.28rem); /* shared card/list subhead tier */
  --step-1:  clamp(1.28rem, 1.2rem + 0.5vw, 1.6rem);
  --step-2:  clamp(1.6rem, 1.45rem + 0.9vw, 2.2rem);
  --step-3:  clamp(2.0rem, 1.7rem + 1.6vw, 3.1rem);
  --step-4:  clamp(2.5rem, 2.0rem + 2.7vw, 4.4rem);
  --step-5:  clamp(2.7rem, 2.1rem + 3.9vw, 6.0rem);

  /* — Micro-label tier (shared floor size for small uppercase labels) — */
  --label-sm: 0.6rem;

  /* — Spacing scale — */
  --space-2: 0.6rem;
  --space-3: 1rem;
  --space-4: 1.6rem;
  --space-5: 2.6rem;
  --space-6: 4rem;
  --space-7: clamp(4.6rem, 3.5rem + 3.5vw, 6.5rem); /* major-beat sections */

  /* — Radii — */
  --radius-sm: 3px;
  --radius: 5px;

  /* — Measure / layout — */
  --gutter: clamp(1.35rem, 5vw, 2.5rem);
  --measure: 39rem;   /* body reading column */
  --plate: 54rem;     /* wider figures/cards */

  /* — Wood primitives (real content: the six species they work) — */
  --wood-cherry:   #8a4a2f;
  --wood-walnut:   #4a3323;
  --wood-oak:      #b58a4e;
  --wood-maple:    #e2cfa6;
  --wood-hickory:  #caa46a;
  --wood-qswo:     #9a7038;  /* quarter-sawn white oak */
}

/* — Light theme (default): unfinished-maple paper, deep-walnut ink — */
:root, :root[data-theme="light"] {
  --color-bg:            #f2ebdd;
  --color-surface:       #f8f2e6;
  --color-surface-2:     #ebe1cd;
  --color-text:          #26190f;
  --color-muted:         #6b5641;
  --color-rule:          #d9ccb2;
  --color-rule-strong:   #c2af8d;
  --color-accent:        #9c5a1c;  /* burnt honey / oiled cherry — AA on paper */
  --color-accent-soft:   #b06f27;
  --color-accent-ink:    #f8f2e6;  /* text ON accent fills */
  --color-cherry:        #7a3720;  /* restrained deep-cherry secondary */
  /* Dark band = walnut espresso (theme-FIXED band) */
  --color-band:          #2a1d12;
  --color-on-band:       #efe4d0;
  --color-on-band-muted: #c4ad8d;
  /* accents that sit ON the fixed dark band must be theme-INDEPENDENT
     (craft trap): pin to the bright value in BOTH themes. */
  --color-accent-on-band: #e0a45a;
  --shadow: 0 1px 0 var(--color-rule-strong), 0 20px 42px -30px rgba(38,25,15,.45);
}

/* — Dark theme: deep walnut ground, warm paper ink — */
:root[data-theme="dark"] {
  --color-bg:            #1b140d;
  --color-surface:       #241a11;
  --color-surface-2:     #2d2116;
  --color-text:          #ece1cf;
  --color-muted:         #a89073;
  --color-rule:          #3a2c1d;
  --color-rule-strong:   #4d3b27;
  --color-accent:        #e0a45a;  /* brighter honey for dark ground */
  --color-accent-soft:   #eab979;
  --color-accent-ink:    #1b140d;
  --color-cherry:        #cf7d5c;
  --color-band:          #120c07;
  --color-on-band:       #ece1cf;
  --color-on-band-muted: #b49a7c;
  --color-accent-on-band: #e0a45a;
  --shadow: 0 1px 0 rgba(0,0,0,.4), 0 24px 50px -32px rgba(0,0,0,.85);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg:            #1b140d;
    --color-surface:       #241a11;
    --color-surface-2:     #2d2116;
    --color-text:          #ece1cf;
    --color-muted:         #a89073;
    --color-rule:          #3a2c1d;
    --color-rule-strong:   #4d3b27;
    --color-accent:        #e0a45a;
    --color-accent-soft:   #eab979;
    --color-accent-ink:    #1b140d;
    --color-cherry:        #cf7d5c;
    --color-band:          #120c07;
    --color-on-band:       #ece1cf;
    --color-on-band-muted: #b49a7c;
    --color-accent-on-band: #e0a45a;
    --shadow: 0 1px 0 rgba(0,0,0,.4), 0 24px 50px -32px rgba(0,0,0,.85);
  }
}