/* ==========================================================================
   Primo Woodworks design tokens  ·  Gilded Ebony  ·  v1.0  ·  2026-09-22
   Load this file before css/primo.css. Every colour, size and timing in the
   component layer comes from here. Change a value here, never in a component.
   Fonts (Google Fonts, one request):
   https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;1,400;1,500&family=Jost:wght@400;500;600&display=swap
   ========================================================================== */

:root {
  /* ---- Base palette -------------------------------------------------- */
  --ebony:        #14110E;  /* page ground */
  --ebony-2:      #1D1915;  /* raised: cards, image placeholders, footer rows */
  --ebony-3:      #0F0D0B;  /* deepest: footer, lightbox, mobile menu */
  --walnut:       #2B2019;  /* the one warm band (story panel, sequence) */
  --gold:         #C4A265;  /* THE accent. Buttons, eyebrows, italics, rules */
  --gold-bright:  #D4B47A;  /* hover and focus state of gold */
  --gold-ink:     #735A2E;  /* gold used as TEXT on limestone (5.1:1) */
  --gold-rule:    #9D7D45;  /* gold used as a RULE or icon on limestone, never text */
  --ivory:        #EFE7D9;  /* text on dark */
  --stone:        #B3A893;  /* secondary text on dark (8.0:1) */
  --stone-dim:    #A39784;  /* captions on dark, smallest allowed (6.6:1) */
  --limestone:    #EBE3D4;  /* the light surface */
  --limestone-2:  #F4EFE6;  /* form fields and inset panels on light */
  --ink:          #1A1612;  /* text on light */
  --ink-muted:    #5B544A;  /* secondary text on light (5.9:1) */

  /* ---- Lines and overlays ------------------------------------------ */
  --line:         rgba(239, 231, 217, .16);  /* hairline on dark */
  --line-strong:  rgba(239, 231, 217, .32);  /* ghost button border on dark */
  --line-light:   rgba(26, 22, 18, .15);     /* hairline on light */
  --line-light-strong: rgba(26, 22, 18, .30);
  --scrim-side:   linear-gradient(90deg, rgba(14,11,9,.88) 0%, rgba(14,11,9,.52) 45%, rgba(14,11,9,.10) 80%);
  --scrim-foot:   linear-gradient(0deg, rgba(14,11,9,.82) 0%, rgba(14,11,9,0) 58%);
  --scrim-card:   linear-gradient(0deg, rgba(14,11,9,.86) 0%, rgba(14,11,9,.05) 62%);
  --shadow-lift:  0 30px 90px rgba(0, 0, 0, .35);

  /* ---- Type families ------------------------------------------------- */
  --font-display: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  --font-body:    "Jost", "Futura", "Century Gothic", Arial, sans-serif;

  /* ---- Type scale (fluid) --------------------------------------------
     Cormorant is for 24px and up only. Anything smaller is Jost.        */
  --fs-display:   clamp(60px, 9.6vw, 150px);   /* home hero h1 */
  --fs-display-2: clamp(52px, 8vw, 124px);     /* inner page hero h1 */
  --fs-h2:        clamp(40px, 5.6vw, 84px);    /* section headline */
  --fs-h3:        clamp(30px, 3.2vw, 46px);    /* list items, card titles, big links */
  --fs-h4:        clamp(24px, 2vw, 30px);      /* small titles, stat labels in serif */
  --fs-stat:      clamp(46px, 5vw, 76px);      /* numerals in the stats row */
  --fs-lead:      clamp(18px, 1.55vw, 22px);   /* intro paragraph */
  --fs-body:      16px;
  --fs-small:     14px;
  --fs-label:     10.5px;                      /* uppercase eyebrow and nav */
  --fs-micro:     9.5px;                       /* uppercase captions */

  --lh-display:   .9;
  --lh-heading:   1;
  --lh-lead:      1.55;
  --lh-body:      1.65;

  --track-display: -.02em;
  --track-label:   .26em;
  --track-nav:     .18em;
  --track-button:  .2em;

  --w-display:    500;   /* Cormorant Medium. Italic uses 400 */
  --w-wordmark:   600;
  --w-body:       400;
  --w-label:      500;
  --w-button:     600;

  /* ---- Space and layout --------------------------------------------- */
  --pad:          clamp(20px, 5vw, 84px);        /* page side gutter */
  --max:          1480px;                        /* content max width */
  --measure:      62ch;                          /* running text max width */
  --section-y:    clamp(96px, 11vw, 176px);      /* vertical section padding */
  --section-y-sm: clamp(64px, 7vw, 112px);
  --gap-xs: 8px;  --gap-s: 16px;  --gap-m: 28px;  --gap-l: 56px;  --gap-xl: clamp(56px, 9vw, 150px);
  --header-h:     96px;
  --header-h-scrolled: 78px;
  --radius:       0;       /* square everywhere. Only the mobile call bar and focus rings round off */

  /* ---- Motion -------------------------------------------------------- */
  --ease-out:     cubic-bezier(.2, .75, .25, 1);
  --ease-in-out:  cubic-bezier(.76, 0, .24, 1);
  --dur-fast:     .25s;
  --dur-med:      .5s;
  --dur-slow:     .9s;
  --dur-scribe:   1.1s;    /* the gold scribe line drawing across */
  --reveal-shift: 28px;

  /* ---- Layers -------------------------------------------------------- */
  --z-header: 900;  --z-menu: 850;  --z-callbar: 820;  --z-lightbox: 1100;  --z-grain: 1000;  --z-cursor: 1200;
}