/* ============================================================
   THE STROOP STUDY — design tokens (the single visual contract)
   Every other stylesheet and every figure reads from these.
   Aesthetic: editorial scientific monograph. Warm paper, deep
   ink, the four task colours used only as data + the conflict
   motif. Self-hosted type. Nothing here looks like a template.
   ============================================================ */

/* ---- Self-hosted faces (woff2 in /assets/fonts) ----
   Display: Fraunces (variable). Body: Newsreader. UI: Hanken
   Grotesk. Data/numerals: Spline Sans Mono. */

@font-face { font-family:"Fraunces"; src:url("/assets/fonts/fraunces-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Fraunces"; src:url("/assets/fonts/fraunces-600.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:"Fraunces"; src:url("/assets/fonts/fraunces-700.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"Fraunces"; src:url("/assets/fonts/fraunces-400i.woff2") format("woff2"); font-weight:400; font-style:italic; font-display:swap; }

@font-face { font-family:"Newsreader"; src:url("/assets/fonts/newsreader-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Newsreader"; src:url("/assets/fonts/newsreader-500.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Newsreader"; src:url("/assets/fonts/newsreader-600.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:"Newsreader"; src:url("/assets/fonts/newsreader-400i.woff2") format("woff2"); font-weight:400; font-style:italic; font-display:swap; }

@font-face { font-family:"Hanken Grotesk"; src:url("/assets/fonts/hanken-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Hanken Grotesk"; src:url("/assets/fonts/hanken-500.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Hanken Grotesk"; src:url("/assets/fonts/hanken-700.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }

@font-face { font-family:"Spline Sans Mono"; src:url("/assets/fonts/spline-mono-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Spline Sans Mono"; src:url("/assets/fonts/spline-mono-600.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; }

:root {
  /* —— Surface & ink —— */
  --paper:        #F7F4ED;   /* warm page */
  --paper-raised: #FCFAF4;   /* cards, raised blocks */
  --paper-sunk:   #EFEBE0;   /* wells, code, table zebra */
  --ink:          #16130E;   /* primary text */
  --ink-soft:     #4A443A;   /* secondary text */
  --ink-faint:    #837B6C;   /* captions, metadata */
  --rule:         #D8D2C4;   /* hairline rules */
  --rule-strong:  #B9B1A0;

  /* —— The four task colours (DATA + conflict motif ONLY) —— */
  --stroop-red:    #C8443B;
  --stroop-green:  #2E7D52;
  --stroop-blue:   #2F5C9E;
  --stroop-amber:  #D9930B;

  /* Semantic mapping for the two conditions in every figure. */
  --c-congruent:   #2E7D52;  /* green — the easy case */
  --c-incongruent: #C8443B;  /* red — the conflict case */

  /* —— Signature accent (links, marks; quiet, not a brand blob) —— */
  --accent:        #8A3A12;  /* burnt sienna */
  --accent-weak:   rgba(138, 58, 18, 0.10);

  /* —— Status —— */
  --ok:   #2E7D52;
  --warn: #B0660C;
  --bad:  #B23B30;

  /* —— Type families —— */
  --font-display: "Fraunces", "Spectral", Georgia, serif;
  --font-body:    "Newsreader", Georgia, "Times New Roman", serif;
  --font-ui:      "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "Spline Sans Mono", ui-monospace, "SFMono-Regular", monospace;

  /* —— Fluid type scale (1.250 minor-third, clamped) —— */
  --t-micro: 0.75rem;
  --t-fine:  clamp(0.80rem, 0.78rem + 0.10vw, 0.875rem);
  --t-base:  clamp(1.02rem, 0.98rem + 0.22vw, 1.18rem);
  --t-lead:  clamp(1.18rem, 1.10rem + 0.45vw, 1.42rem);
  --t-h6:    clamp(1.05rem, 1.00rem + 0.30vw, 1.20rem);
  --t-h5:    clamp(1.20rem, 1.10rem + 0.55vw, 1.45rem);
  --t-h4:    clamp(1.45rem, 1.28rem + 0.95vw, 1.95rem);
  --t-h3:    clamp(1.80rem, 1.50rem + 1.70vw, 2.70rem);
  --t-h2:    clamp(2.25rem, 1.80rem + 2.60vw, 3.70rem);
  --t-h1:    clamp(2.90rem, 2.10rem + 4.40vw, 5.60rem);
  --t-mega:  clamp(3.40rem, 2.10rem + 7.20vw, 8.00rem);

  /* —— Measure & rhythm —— */
  --measure:      66ch;     /* prose line length */
  --measure-wide: 78ch;
  --lh-tight: 1.06;
  --lh-snug:  1.30;
  --lh-body:  1.62;

  /* —— Spacing (8px base, fluid section gaps) —— */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 3rem;     --s-8: 4rem;
  --s-9: 6rem;     --s-10: 8rem;
  --section-y: clamp(3.5rem, 2rem + 7vw, 8rem);
  --gutter:    clamp(1.25rem, 0.5rem + 3.5vw, 4.5rem);
  --content-max: 1140px;

  /* —— Lines, radius, shadow (print-restrained) —— */
  --hair: 1px;
  --radius-s: 4px;
  --radius:   8px;
  --radius-l: 14px;
  --shadow-card:
    0 1px 2px rgba(22, 19, 14, 0.04),
    0 8px 26px -16px rgba(22, 19, 14, 0.20);
  --shadow-lift:
    0 2px 6px rgba(22, 19, 14, 0.06),
    0 18px 44px -22px rgba(22, 19, 14, 0.28);

  /* —— Motion —— */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 160ms;
  --dur:      280ms;
  --dur-slow: 620ms;

  --z-nav: 50;
  --z-overlay: 90;
}

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

/* The example/simulated cohort tints amber wherever it is shown,
   so "this is illustrative, not human data" is visible at a glance. */
:root {
  --example-tint: rgba(217, 147, 11, 0.12);
  --example-edge: #D9930B;
}