/* Agog design tokens (G0, 2026-11-08). Black and white only: no accent colour until Ibrahim adds one.
   Pages use these variables; no raw colours, sizes or eases in section CSS. */

@font-face {
  font-family: "Geist";
  src: url("../fonts/geist-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/geist-mono-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* Colour: paper and ink, not pure white and black */
  --paper: #f7f7f4;      /* page background */
  --paper-2: #efefeb;    /* raised panel on paper */
  --ink: #0d0d0d;        /* text, the loud button, dark sections */
  --ink-2: #1a1a1a;      /* raised panel on ink */
  --mid: #5f5f5c;        /* secondary text on paper (7.0:1) */
  --mid-dark: #a3a39f;   /* secondary text on ink (7.9:1) */
  --line: #dcdcd6;       /* hairlines on paper */
  --line-dark: #2c2c2c;  /* hairlines on ink */
  --white: #ffffff;      /* only inside the logo eye and on ink buttons */

  /* Semantic (light theme = default) */
  --bg: var(--paper);
  --bg-raised: var(--paper-2);
  --fg: var(--ink);
  --fg-soft: var(--mid);
  --rule: var(--line);
  --btn-bg: var(--ink);
  --btn-fg: var(--paper);
  --focus: var(--ink);

  /* Type */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --w-body: 400;
  --w-medium: 500;
  --w-display: 640;
  --w-heavy: 760;

  /* Fluid sizes, 390 px to 1440 px */
  --fs-mono: 0.75rem;                                  /* 12 px caps labels */
  --fs-small: 0.875rem;                                /* 14 px */
  --fs-body: clamp(1rem, 0.96rem + 0.18vw, 1.125rem);  /* 16 to 18 */
  --fs-lead: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
  --fs-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.75rem);
  --fs-h2: clamp(2rem, 1.5rem + 2.2vw, 3.75rem);
  --fs-h1: clamp(2.75rem, 1.7rem + 4.6vw, 6.5rem);
  --fs-giant: clamp(6rem, 2rem + 18vw, 22rem);          /* cropped wordmark, footer */
  --lh-tight: 1.02;
  --lh-head: 1.1;
  --lh-body: 1.55;
  --track-display: -0.045em;
  --track-head: -0.03em;
  --track-mono: 0.06em;

  /* Space (8 px base) */
  --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(4.5rem, 3rem + 6vw, 8.75rem);     /* 72 px phone, 140 px desktop */
  --gutter: clamp(1rem, 0.6rem + 1.6vw, 1.5rem);
  --edge: clamp(1rem, 0.4rem + 2.4vw, 2.5rem);         /* page edge margin for inset panels */
  --max: 84rem;                                         /* 1344 px content width */
  --measure: 38rem;                                     /* reading width */

  /* Shape */
  --r-sm: 0.5rem;
  --r-md: 0.875rem;
  --r-lg: 1.25rem;       /* inset panels */
  --r-pill: 999px;
  --hair: 1px;

  /* Motion (mirrors docs/DIRECTION.md section 6) */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);        /* expo.out: entrances */
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);     /* power3.inOut: scene changes */
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);    /* back.out: chips */
  --d-micro: 200ms;
  --d-draw: 400ms;
  --d-reveal: 600ms;
  --d-stagger: 40ms;

  /* Breakpoints (for reference in JS; CSS uses the raw values) */
  --bp-tab: 768px;
  --bp-desk: 1024px;
}

/* Dark sections and the dark theme share one set */
.theme-dark,
[data-theme="dark"] {
  --bg: var(--ink);
  --bg-raised: var(--ink-2);
  --fg: var(--paper);
  --fg-soft: var(--mid-dark);
  --rule: var(--line-dark);
  --btn-bg: var(--paper);
  --btn-fg: var(--ink);
  --focus: var(--paper);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--ink);
    --bg-raised: var(--ink-2);
    --fg: var(--paper);
    --fg-soft: var(--mid-dark);
    --rule: var(--line-dark);
    --btn-bg: var(--paper);
    --btn-fg: var(--ink);
    --focus: var(--paper);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --d-micro: 0ms; --d-draw: 0ms; --d-reveal: 0ms; --d-stagger: 0ms; }
}

/* Classical italic for one statement per chapter (Direction B) */
@font-face {
  font-family: "Instrument Serif";
  src: url("../fonts/instrument-serif-italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}
:root { --font-serif: "Instrument Serif", "Iowan Old Style", Georgia, serif; }

/* Agog colour (Ibrahim on v1, 2026-11-08: colour and a good feeling). Playful bright palette on cream. */
:root {
  --cream: #fbf6ee;
  --cobalt: #2f5bff;
  --tangerine: #ff7a1a;
  --sun: #ffc93c;
  --mint: #3ddc97;
  --lilac: #b79cff;
  --night: #141414;
}