/* ============================================================================
   America Éire — Design Tokens
   The single source of truth for the design system. Every page links this.
   No build step: plain CSS custom properties, authored by hand.

   Two layers:
     1. RAW palette — the literal brand colors (from the official palette).
     2. SEMANTIC roles — what those colors DO. Reference roles in page CSS,
        not raw palette, so a remap is a one-line change here.

   Fluid type & space (Utopia method, single ratio): generated from the anchors
       ratio 1.333 · base 18px @ 800px viewport  ->  21px @ 1600px viewport
   To re-tune, regenerate the clamps from new anchors (don't hand-edit values).
   ========================================================================== */

:root {

  /* --- 1. RAW PALETTE ------------------------------------------------------ */
  /* Backgrounds */
  --cream:        #f4ede0;   /* main page background */
  --cream-deep:   #ebe2cf;   /* warmer cream, for layering */
  /* Greens */
  --green:        #244838;   /* Forest — core green: headings & logo */
  --pine:         #14271e;   /* deepest green — body text ("our black") */
  /* Warm accents */
  --orange:       #c44a2a;   /* Rust — type accent, drop cap */
  --rust-deep:    #a8401e;   /* darker orange */
  --gold:         #a9852f;   /* fine linework — rules, strings */
  --gold-deep:    #8a6a1f;   /* deeper gold companion */
  /* Text & neutrals */
  --stone:        #8a8378;   /* warm grey — secondary/subdued text */
  /* Map (decorative coastlines) */
  --sea:          #eadfc6;
  --land:         #d8cbae;
  --land-line:    #b89f73;

  /* --- 2. SEMANTIC ROLES --------------------------------------------------- */
  --color-bg:           var(--cream);
  --color-bg-layer:     var(--cream-deep);
  --color-text:         var(--pine);     /* body copy — pine is our "black" */
  --color-heading:      var(--green);    /* h1, h2, h3 */
  --color-subdued:      var(--stone);    /* secondary / attribution text */
  --color-accent:       var(--orange);   /* drop cap, sparing accents */
  --color-rule:         var(--gold);     /* hairlines, borders, dividers */
  --color-kicker:       var(--gold-deep);/* eyebrows / kickers */
  --color-coastline:    var(--land-line);/* faint margin coastlines */

  /* --- 3. FLUID TYPE SCALE ------------------------------------------------- */
  /* Assignments: label = step -2 · eyebrow = step -1 · body = step 0 · h3 = step 1
     · h2 = step 2 · h1 = step 3. Steps 4, 5 available, unassigned.
     Two small registers, by job (see semantic sizes below):
       label   (-2) = utilitarian annotation that should recede — hex values,
                      spec captions, fine print. The smallest text on the page.
       eyebrow (-1) = editorial small text meant to be READ — section kickers,
                      datelines, attributions ("County Cork · 1851"). */
  --step--2: clamp(0.6331rem, 0.5276rem + 0.211vw, 0.7387rem);   /* 10.1->11.8px */
  --step--1: clamp(0.844rem, 0.7033rem + 0.2813vw, 0.9846rem);   /* 13.5->15.8px */
  --step-0:  clamp(1.125rem, 0.9375rem + 0.375vw, 1.3125rem);    /* 18.0->21.0px */
  --step-1:  clamp(1.4996rem, 1.2497rem + 0.4999vw, 1.7496rem);  /* 24.0->28.0px */
  --step-2:  clamp(1.999rem, 1.6658rem + 0.6663vw, 2.3322rem);   /* 32.0->37.3px */
  --step-3:  clamp(2.6647rem, 2.2206rem + 0.8882vw, 3.1088rem);  /* 42.6->49.7px */
  --step-4:  clamp(3.552rem, 2.96rem + 1.184vw, 4.144rem);       /* 56.8->66.3px */
  --step-5:  clamp(4.7348rem, 3.9457rem + 1.5783vw, 5.524rem);   /* 75.8->88.4px */

  /* Semantic small-text sizes — reference these, not the raw steps, so the
     "eyebrow vs label" decision lives in one place. */
  --size-eyebrow: var(--step--1);   /* kickers, datelines, attributions */
  --size-label:   var(--step--2);   /* fine annotation: hex values, spec captions */

  /* --- 4. FLUID SPACE SCALE ------------------------------------------------ */
  /* Multiples of body size; interpolated the same 800->1600 range as type, so
     spacing stays in rhythm with text. Use these for margin/padding/gap. */
  --space-3xs: clamp(0.2813rem, 0.2344rem + 0.0938vw, 0.3281rem);  /* 5->5px */
  --space-2xs: clamp(0.5625rem, 0.4688rem + 0.1875vw, 0.6563rem);  /* 9->11px */
  --space-xs:  clamp(0.8438rem, 0.7031rem + 0.2813vw, 0.9844rem);  /* 14->16px */
  --space-s:   clamp(1.125rem, 0.9375rem + 0.375vw, 1.3125rem);    /* 18->21px */
  --space-m:   clamp(1.6875rem, 1.4063rem + 0.5625vw, 1.9688rem);  /* 27->32px */
  --space-l:   clamp(2.25rem, 1.875rem + 0.75vw, 2.625rem);        /* 36->42px */
  --space-xl:  clamp(3.375rem, 2.8125rem + 1.125vw, 3.9375rem);    /* 54->63px */
  --space-2xl: clamp(4.5rem, 3.75rem + 1.5vw, 5.25rem);            /* 72->84px */
  --space-3xl: clamp(6.75rem, 5.625rem + 2.25vw, 7.875rem);        /* 108->126px */
  /* fluid gaps between named sizes (one-up pairs) */
  --space-s-m: clamp(1.125rem, 0.2813rem + 1.6875vw, 1.9688rem);   /* 18->32px */
  --space-m-l: clamp(1.6875rem, 0.75rem + 1.875vw, 2.625rem);      /* 27->42px */
  --space-l-xl: clamp(2.25rem, 0.5625rem + 3.375vw, 3.9375rem);    /* 36->63px */

  /* --- 5. LAYOUT ----------------------------------------------------------- */
  --measure: 65ch;            /* ideal reading line length */
  --gutter:  var(--space-m);  /* default grid gutter */
  --grid-max: 1600px;         /* content max width (matches type max anchor) */
  --vw-min:  800px;           /* type/space scale lower anchor (reference) */

  /* --- 6. FONTS ------------------------------------------------------------ */
  --font-serif: 'Stoker', Georgia, serif;          /* headings, display */
  --font-sans:  'Tenon', system-ui, sans-serif;    /* body, UI */

  /* --- 7. DROP CAP (measured to Stoker; tune live, see base.css) ----------- */
  --cap-size: 4.2em;
  --cap-rise: 0em;
}