/* ============================================================
   Dr. Seth Healing — design tokens
   The single source of truth. Nothing below this file may
   introduce a raw colour, radius, or duration value.
   Mirrors DESIGN.md; see that file for the reasoning.
   ============================================================ */

:root{
  /* --- ground & surface ------------------------------------ */
  --cream:#F7EAD8;        /* Turmeric Cream — page canvas, the default ground */
  --card:#FDF6EA;         /* Raw Silk — every card surface, never bordered    */
  --tan:#EED5AE;          /* Sandalwood Tan — the "pause here" band           */
  --brown:#5A2C12;        /* Burnt Cardamom — the closing ask, used once      */
  --green:#1D3922;        /* Deep Palm — heading ink. Never a large field.    */
  --green-deep:#26472D;   /* Palm Canopy — the footer, the only green field   */
  --night:#191108;        /* photographic ground behind hero media            */

  /* --- brass ------------------------------------------------
     One hue at five values. --gold is the brand brass and owns
     everything readable AS brass: ornament, hairlines, numerals.
     --gold-action owns filled button backgrounds only, and is
     darkened so 19–23px labels clear WCAG AA (4.63:1 on #FFF8ED;
     the brand brass gives only 3.16:1).

     OPEN DECISION (PRODUCT.md): if comp-exactness is chosen over
     AA, set --gold-action to #BC8130 and --gold-action-hi to
     #CD8F35. That single edit reverts every button sitewide.     */
  --gold:#BC8130;
  --gold-action:#9A6620;
  --gold-action-hi:#8A5A1B;
  --gold-line:#C79248;    /* hairlines, ornament, arrow strokes — line weight only */
  --gold-soft:#B0854A;    /* large serif index numerals at rest (3.1:1 on Raw Silk) */

  /* --- ink -------------------------------------------------- */
  --ink:#343028;          /* everything the practice says in its own voice */
  --focus-ring:var(--green);
  --ink-soft:#937F6A;     /* patient speech only — testimonial quote bodies */
  --brass-ink:#7C5522;    /* small brass labels on light grounds (6.1:1)   */
  --hairline:#F0E6D4;     /* the only divider colour, for Raw Silk grounds  */
  --rule-on-cream:rgba(199,146,72,.32); /* hairline that actually renders on cream */
  --gold-wash:rgba(199,146,72,.14); /* selected and hover state on light grounds */

  /* --- light text on dark grounds --------------------------- */
  --lamp:#FFFCF6;         /* never #FFF — see The No-White Rule */
  --lamp-nav:#F6EEE0;
  --lamp-dim:#EFE1D1;
  --lamp-warm:#FFF9F0;    /* headings on the closing band            */
  --lamp-cta:#FFFCF6;     /* nav CTA label over the dark hero        */
  --lamp-foot:#F2EADC;    /* footer links                            */
  --on-action:#FFF8ED;
  --edge-cta:#E9CE9F;     /* nav CTA border on hover                 */
  --scroll-thumb:#DCC49B;
  --arrow-stroke:#A97C3C;  /* carousel arrow glyph */
  --lamp-hero:#F2E8DA;     /* hero body copy over photography */

  /* --- navigation glass ----------------------------------- */
  --nav-on-dark:#ECD3AC;
  --nav-glass-top:rgba(255,252,246,.01);
  --nav-glass-scrolled:rgba(253,246,234,.88);
  --nav-rule-top:rgba(236,211,172,.16);
  --nav-rule-scrolled:rgba(199,146,72,.32);

  /* --- type ------------------------------------------------- */
  --serif:'Cormorant Garamond','Times New Roman',serif;
  --sans:'Fira Sans','Segoe UI',system-ui,-apple-system,sans-serif;
  --fs-display:clamp(34px,4.3vw,58px);
  --fs-headline:47px;
  --fs-title:30px;
  --fs-lead:18.6px;
  --fs-body:15.6px;
  --fs-label:14.3px;
  --lh-lead:26px;
  --lh-body:19px;

  /* --- shape ------------------------------------------------ */
  --r-sm:5px;             /* buttons                       */
  --r-md:10px;            /* photographic media            */
  --r-lg:12px;            /* list and testimonial cards    */
  --r-xl:22px;            /* the largest surfaces          */
  --r-pill:999px;         /* nav CTA and carousel arrows only */

  /* --- depth: warm, far-diffused, never rgba(0,0,0,…) ------- */
  --sh-float:0 28px 64px -30px rgba(30,18,8,.62);
  --sh-media:0 18px 36px -24px rgba(50,30,12,.6);
  --sh-hover:0 16px 34px -24px rgba(60,38,16,.55);
  --sh-action:0 10px 26px -14px rgba(90,44,18,.75);

  /* --- motion ----------------------------------------------- */
  --ease:cubic-bezier(.16,1,.3,1);  /* exponential ease-out */
  --t-state:.25s ease;
  --t-sweep:.3s ease;
  --t-settle:.9s var(--ease);
}

/* Breakpoints are 1340 / 1120 / 860 across every template.
   CSS custom properties cannot be used in media queries, so the
   numbers are literal below — if you change one, change all. */