/* ==========================================================================
   Deconstructing Design — Design Tokens
   Brand palette + WCAG 2.1 AA verified semantic assignments.

   RAW PALETTE (the six approved colors)
   --------------------------------------------------------------------------
   teal        #367373   sage        #568C87
   sand        #D9C7A7   ochre       #A65712
   terracotta  #A63117   espresso    #261810

   VERIFIED CONTRAST RATIOS (sRGB relative-luminance method, WCAG 2.1)
   AA needs 4.5:1 for normal text, 3:1 for large text (>=24px, or >=18.66px bold)
   and 3:1 for UI component / graphical-object boundaries.

     espresso on sand ......... 10.39:1   AA normal  <- primary body
     espresso on white ........ 17.21:1   AA normal  <- primary body (light)
     sand on espresso ......... 10.39:1   AA normal  <- body on dark
     white on espresso ........ 17.21:1   AA normal  <- body on dark
     white on teal ............  5.45:1   AA normal  <- text on teal panels
     white on ochre ...........  5.26:1   AA normal  <- text on ochre panels
     white on terracotta ......  6.83:1   AA normal  <- text on terracotta
     espresso on sage .........  4.50:1   AA normal  <- text on sage panels
     teal on sand .............  3.29:1   AA large / UI only (headings, borders)
     sand on ochre ............  3.17:1   AA large / UI only
     terracotta on sand .......  4.13:1   AA large / UI only (accents, headings)
     white on sage ............  3.82:1   AA large only

   RULE OF THUMB baked into this file: normal body copy uses only pairings
   at >=4.5:1. The 3.x:1 pairings are reserved for large headings, icons,
   dividers, and focus rings — never small body text.
   ========================================================================== */

:root {
  /* Raw brand colors */
  --c-teal:       #367373;
  --c-sage:       #568C87;
  --c-sand:       #D9C7A7;
  --c-ochre:      #A65712;
  --c-terracotta: #A63117;
  --c-espresso:   #261810;
  --c-white:      #ffffff;

  /* Tints/shades derived only for surfaces & shadows (not brand-defining) */
  --c-sand-050:   #f4eee2;   /* very light sand wash for page background */
  --c-sand-100:   #ece2cf;
  --c-espresso-080: rgba(38, 24, 16, 0.08);
  --c-espresso-160: rgba(38, 24, 16, 0.16);
  --c-espresso-400: rgba(38, 24, 16, 0.40);

  /* --- Semantic surface tokens --- */
  --surface-page:      var(--c-sand-050);   /* espresso text = ~15:1 */
  --surface-raised:    var(--c-white);       /* espresso text = 17.2:1 */
  --surface-ink:       var(--c-espresso);    /* sand/white text */
  --surface-teal:      var(--c-teal);        /* white text */
  --surface-sage:      var(--c-sage);        /* espresso text 4.5:1 */
  --surface-ochre:     var(--c-ochre);       /* white text */
  --surface-terracotta:var(--c-terracotta);  /* white text */

  /* --- Semantic text tokens (paired to compliant surfaces) --- */
  --text-strong:   var(--c-espresso);   /* on sand / white / sage */
  --text-body:     #33261c;             /* espresso lightened; still >12:1 on sand */
  --text-on-dark:  var(--c-sand);       /* on espresso: 10.4:1 */
  --text-on-teal:  var(--c-white);      /* 5.45:1 */
  --text-on-ochre: var(--c-white);      /* 5.26:1 */
  --text-on-terra: var(--c-white);      /* 6.83:1 */
  --text-on-sage:  var(--c-espresso);   /* 4.50:1 */

  /* --- Accent / interactive (used at large sizes or as UI boundaries) --- */
  --accent:        var(--c-terracotta);
  --accent-warm:   var(--c-ochre);
  --link:          #1f4f4f;            /* deepened teal for AA on light: 6.1:1 */
  --link-hover:    var(--c-terracotta);
  --focus-ring:    var(--c-terracotta);

  /* --- Lines & borders (UI, 3:1 rule) --- */
  --border-soft:   var(--c-espresso-160);
  --border-strong: var(--c-espresso);
  --rule-warm:     var(--c-ochre);

  /* --- Typography --- */
  --font-display: "Fraunces", "Hoefler Text", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Fluid type scale (major third-ish, clamped) */
  --step--1: clamp(0.83rem, 0.79rem + 0.20vw, 0.94rem);
  --step-0:  clamp(1.00rem, 0.94rem + 0.30vw, 1.15rem);
  --step-1:  clamp(1.25rem, 1.14rem + 0.55vw, 1.55rem);
  --step-2:  clamp(1.56rem, 1.36rem + 1.00vw, 2.10rem);
  --step-3:  clamp(1.95rem, 1.61rem + 1.70vw, 2.90rem);
  --step-4:  clamp(2.44rem, 1.88rem + 2.80vw, 4.10rem);
  --step-5:  clamp(3.05rem, 2.10rem + 4.75vw, 5.90rem);

  /* Spacing scale */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-7: 3rem;     --sp-8: 4.5rem;
  --sp-9: 7rem;

  /* Layout */
  --measure: 68ch;
  --wrap: 1200px;
  --wrap-wide: 1400px;
  --radius: 2px;          /* restrained, near-square; the brand is earthen, not glossy */
  --radius-lg: 4px;
  --shadow-1: 0 1px 2px var(--c-espresso-080);
  --shadow-2: 0 6px 24px var(--c-espresso-160);

  --dur: 480ms;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0ms; }
}