/* ==========================================================================
   The Language Mill — tokens.css
   The single source of truth. Every colour, size, space, radius, duration
   and font used anywhere in the CSS must reference a variable defined here.
   No hex literals or magic numbers are permitted outside this file.
   ========================================================================== */

:root {
  /* --- Brand colour -------------------------------------------------------
     Colour is an accent, never a background wash. --paper / --paper-alt are
     the only permitted section backgrounds. */
  --paper:        #FBFAF7;   /* page background — warm off-white, never pure white */
  --paper-alt:    #F4F2EC;   /* alternating section bands */
  --ink:          #1C1C1A;   /* headings */
  --ink-soft:     #4A4A46;   /* body copy */
  --ink-mute:     #8A8A82;   /* meta, captions */
  --forest:       #1E6B38;   /* primary — buttons, links, active nav */
  --forest-deep:  #14502A;   /* hover */
  --forest-tint:  #E8F0E9;   /* chips, highlight cards */
  --line:         #E3E0D8;   /* hairline borders */

  /* Soft paper grain — barely-there fractal-noise texture on the page bg */
  --paper-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.035'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* Semantic aliases so components read by intent, not by colour name */
  --bg:            var(--paper);
  --bg-alt:        var(--paper-alt);
  --text:          var(--ink-soft);
  --heading:       var(--ink);
  --meta:          var(--ink-mute);
  --link:          var(--forest);
  --link-hover:    var(--forest-deep);
  --border:        var(--line);
  --border-strong: #CFCBBF;
  --error:         #B42318;   /* form validation errors */
  --error-tint:    #FBEAE8;
  --focus-ring:    var(--forest);
  --overlay:       rgba(28, 28, 26, 0.62);   /* lightbox / modal scrim */
  --on-forest:     #FBFAF7;                   /* text on a forest fill */

  /* --- Type families ------------------------------------------------------
     Display: Newsreader — a warm, editorial humanist serif with a lively
     italic (used for pull-quotes and the wordmark).
     UI/body: Hanken Grotesk — a clean, warm humanist grotesk that reads
     calmly at small sizes and pairs without competing with the serif. */
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-ui:      "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;

  /* --- Fluid type scale (clamp) ------------------------------------------
     Minor-third-ish ramp. min at 375px, max at ~1440px viewport. */
  --step--1:  clamp(0.83rem, 0.80rem + 0.14vw, 0.90rem);   /* meta, captions */
  --step-0:   clamp(1.00rem, 0.96rem + 0.18vw, 1.10rem);   /* body */
  --step-1:   clamp(1.20rem, 1.12rem + 0.34vw, 1.44rem);   /* lead, card title */
  --step-2:   clamp(1.44rem, 1.31rem + 0.58vw, 1.94rem);   /* h4 / h3 */
  --step-3:   clamp(1.73rem, 1.52rem + 0.92vw, 2.62rem);   /* h3 / h2 */
  --step-4:   clamp(2.07rem, 1.74rem + 1.45vw, 3.53rem);   /* h2 / section */
  --step-5:   clamp(2.49rem, 1.98rem + 2.24vw, 4.77rem);   /* h1 */
  --step-6:   clamp(2.99rem, 2.22rem + 3.38vw, 6.00rem);   /* hero display */

  /* Line-heights & weights */
  --lh-tight:   1.08;
  --lh-heading: 1.14;
  --lh-snug:    1.35;
  --lh-body:    1.62;
  --tracking-eyebrow: 0.14em;
  --tracking-tight:  -0.015em;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* --- Space scale (fluid where useful) ---------------------------------- */
  --space-3xs: 0.25rem;   /*  4px */
  --space-2xs: 0.5rem;    /*  8px */
  --space-xs:  0.75rem;   /* 12px */
  --space-sm:  1rem;      /* 16px */
  --space-md:  1.5rem;    /* 24px */
  --space-lg:  2rem;      /* 32px */
  --space-xl:  3rem;      /* 48px */
  --space-2xl: 4rem;      /* 64px */
  --space-3xl: 6rem;      /* 96px */
  --space-section: clamp(3.5rem, 2.5rem + 4vw, 6.5rem);  /* vertical section rhythm */

  /* --- Layout ------------------------------------------------------------- */
  --container-max: 1200px;
  --container-narrow: 820px;   /* prose / centred statements */
  --gutter: 24px;              /* becomes 40px at >=900 (see base.css) */
  --header-h: 76px;

  /* --- Radii -------------------------------------------------------------- */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --radius-round: 50%;

  /* --- Borders ------------------------------------------------------------ */
  --hairline: 1px solid var(--line);
  --hairline-strong: 1px solid var(--border-strong);
  --border-width: 1px;

  /* --- Shadows (barely there — prefer borders) --------------------------- */
  --shadow-1: 0 1px 2px rgba(28, 28, 26, 0.04);
  --shadow-2: 0 4px 14px rgba(28, 28, 26, 0.06);
  --shadow-3: 0 12px 32px rgba(28, 28, 26, 0.10);

  /* --- Motion ------------------------------------------------------------- */
  --duration: 180ms;
  --ease: ease-out;
  --transition: var(--duration) var(--ease);

  /* --- Z-index ------------------------------------------------------------ */
  --z-header: 100;
  --z-mega: 110;
  --z-overlay: 200;
  --z-modal: 210;
  --z-lightbox: 220;

  /* --- Focus -------------------------------------------------------------- */
  --focus-width: 2px;
  --focus-offset: 2px;
}