/* EM Field Guide site tokens (step 8 of marketing-site-craft). Derived from the app's design tokens
   (docs/projects/em-field-guide/components/app/design.md §3) so site and product are one thing, in direction A
   (Field notes) with B's section tint and C's figure captions. Derivation and the italic decision: tokens.md.
   Fluid values are Utopia clamps between 360 and 1440 px viewports (slope per 100vw, intercept in rem at 16 px).
   Every value is named; pages use tokens, never literals. */

:root {
  color-scheme: light dark;

  /* ---- type: families (self-hosted OFL Latin subsets, 2 files; see tokens.md for the italic and mono decisions) */
  --font-sans: "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-figure: var(--font-sans);                 /* figure captions: Geist with tabular figures, in place of a third file */

  /* ---- type: fluid scale, ratio 1.2 at 360 px to 1.25 at 1440 px, base 17 px to 19 px (Utopia) */
  --step--2: clamp(0.7378rem, 0.7305rem + 0.0328vw, 0.76rem);   /* 11.8 to 12.2 px: small print */
  --step--1: clamp(0.8854rem, 0.8639rem + 0.0957vw, 0.95rem);   /* 14.2 to 15.2 px: captions, labels, footer */
  --step-0:  clamp(1.062rem, 1.0208rem + 0.1852vw, 1.188rem);   /* 17.0 to 19.0 px: body */
  --step-1:  clamp(1.275rem, 1.2052rem + 0.3102vw, 1.484rem);    /* 20.4 to 23.8 px: lede, h3 */
  --step-2:  clamp(1.53rem, 1.4215rem + 0.4822vw, 1.855rem);     /* 24.5 to 29.7 px: h2 small */
  --step-3:  clamp(1.836rem, 1.6749rem + 0.7161vw, 2.319rem);     /* 29.4 to 37.1 px: h2 */
  --step-4:  clamp(2.203rem, 1.9712rem + 1.0311vw, 2.899rem);    /* 35.3 to 46.4 px: h1 secondary pages */
  --step-5:  clamp(2.644rem, 2.3171rem + 1.4520vw, 3.624rem);   /* 42.3 to 58.0 px: the hero headline */

  /* ---- type: leading and tracking */
  --leading-body: 1.55;
  --leading-read: 1.5;         /* the serif, reading and the character's words */
  --leading-tight: 1.1;        /* h2, h3 */
  --leading-display: 1.05;     /* h1 */
  --tracking-display: -0.025em;
  --tracking-heading: -0.02em;
  --tracking-label: 0.04em;    /* uppercase labels and figure captions */
  --measure: 62ch;             /* body line length; never above 75 */
  --measure-lede: 46ch;
  --measure-h1: 14ch;

  /* ---- space: fluid pairs (Utopia), 360 to 1440 px */
  --space-3xs: 0.25rem;                                           /* 4 px */
  --space-2xs: clamp(0.5312rem, 0.5104rem + 0.0926vw, 0.5938rem);    /* 8.5 to 9.5 px */
  --space-xs:  clamp(0.7969rem, 0.7656rem + 0.1389vw, 0.8906rem); /* 12.75 to 14.25 px */
  --space-s:   clamp(1.062rem, 1.0208rem + 0.1852vw, 1.188rem); /* 17 to 19 px: one line of body */
  --space-m:   clamp(1.594rem, 1.5312rem + 0.2778vw, 1.781rem); /* 25.5 to 28.5 px */
  --space-l:   clamp(2.125rem, 2.0417rem + 0.3704vw, 2.375rem);   /* 34 to 38 px */
  --space-xl:  clamp(3.188rem, 3.0625rem + 0.5556vw, 3.562rem); /* 51 to 57 px */
  --space-2xl: clamp(4.25rem, 4.0833rem + 0.7407vw, 4.75rem);     /* 68 to 76 px: section padding, mobile floor 64 */
  --space-3xl: clamp(4rem, 2.6667rem + 5.9259vw, 8rem);     /* 64 to 128 px: section padding, desktop 96 to 160 */
  --space-4xl: clamp(5rem, 3.3333rem + 7.4074vw, 10rem);          /* 80 to 160 px: the hero */
  --gutter: clamp(1rem, 0.6667rem + 1.4815vw, 2rem);              /* 16 to 32 px page gutter */
  --wrap: 72rem;                                                  /* 1152 px content width */
  --wrap-text: 44rem;                                             /* secondary pages (privacy, support, terms) */

  /* ---- colour: neutral scale, 12 steps, from the app's bg, bg2, bg3, line, ink2 and ink (hue 180 to 210)
          1 and 2 backgrounds, 3 to 5 states, 6 to 8 borders, 9 and 10 fills, 11 and 12 text */
  --n1: oklch(1 0 0);            --n2: oklch(0.975 0.005 180); --n3: oklch(0.948 0.008 180); --n4: oklch(0.925 0.008 185);
  --n5: oklch(0.9 0.008 190);    --n6: oklch(0.86 0.01 195);   --n7: oklch(0.8 0.012 200);   --n8: oklch(0.7 0.014 205);
  --n9: oklch(0.56 0.016 210);   --n10: oklch(0.5 0.016 210);  --n11: oklch(0.43 0.016 210); --n12: oklch(0.22 0.02 210);
  /* ---- colour: accent scale around the app's action colour oklch(0.5 0.1 172) */
  --a1: oklch(0.99 0.01 172);    --a2: oklch(0.97 0.02 172);   --a3: oklch(0.94 0.04 172);   --a4: oklch(0.9 0.06 172);
  --a5: oklch(0.84 0.08 172);    --a6: oklch(0.76 0.1 172);    --a7: oklch(0.68 0.11 172);   --a8: oklch(0.6 0.11 172);
  --a9: oklch(0.5 0.1 172);      --a10: oklch(0.45 0.1 172);   --a11: oklch(0.4 0.09 172);   --a12: oklch(0.3 0.07 172);
  /* ---- colour: the inner layer (the character's thoughts; never a background, gradient or button) */
  --inner: oklch(0.5 0.15 295);  --inner-ink: oklch(0.4 0.14 295); --inner-soft: oklch(0.965 0.02 295);

  /* ---- colour roles */
  --bg: oklch(1 0 0);            /* page; = --n1. A literal so the site check can compare it with brand.md */
  --bg-tint: var(--n2);          /* the section tint borrowed from tile B (the app's bg2) */
  --bg-panel: var(--n3);         /* figure panels, code, the tab strip */
  --line: var(--n5);  --line-strong: var(--n6);
  --ink: var(--n12);  --ink-2: var(--n11);  --ink-3: var(--n10);
  --accent: oklch(0.5 0.1 172);  --accent-hover: var(--a10);  --accent-active: var(--a11);  --ring: var(--a6);  --accent-soft: var(--a2);
  --on-accent: oklch(1 0 0);
  --frame: var(--n12);           /* the phone frame */
  --badge-bg: var(--frame);  --badge-ink: var(--n1);  --badge-line: var(--n8);   /* placeholder store badges */
  --skip-bg: var(--n12);  --skip-ink: var(--n1);

  /* ---- shape (from the app: 10 buttons, 12 cards, 16 bubbles, 999 chips) */
  --radius-xs: 0.375rem;  --radius-s: 0.625rem;  --radius-m: 0.75rem;  --radius-l: 1rem;  --radius-pill: 999px;
  --radius-phone: 2.5rem;  --radius-screen: 2rem;
  --rule: 1px;  --rule-accent: 2px;

  /* ---- elevation: two levels, derived from ink at low alpha; nothing floats except the phone */
  --shadow-1: 0 1px 2px oklch(0.22 0.02 210 / 0.08), 0 0 0 1px oklch(0.22 0.02 210 / 0.04);
  --shadow-2: 0 1.5rem 3rem -1.5rem oklch(0.22 0.02 210 / 0.45);

  /* ---- motion: state changes only, CSS only */
  --dur-1: 150ms;  --dur-2: 250ms;
  --ease-out: cubic-bezier(0.2, 0, 0, 1);

  /* ---- targets */
  --target: 1.5rem;        /* 24 px minimum */
  --target-primary: 2.75rem; /* 44 px for the primary action */
}

@media (prefers-color-scheme: dark) {
  :root {
    --n1: oklch(0.175 0.012 215); --n2: oklch(0.205 0.013 215); --n3: oklch(0.24 0.013 215); --n4: oklch(0.27 0.013 215);
    --n5: oklch(0.3 0.013 215);   --n6: oklch(0.34 0.012 215);  --n7: oklch(0.37 0.012 215); --n8: oklch(0.45 0.012 210);
    --n9: oklch(0.6 0.012 205);   --n10: oklch(0.7 0.01 200);   --n11: oklch(0.78 0.01 200); --n12: oklch(0.95 0.006 200);
    --accent: oklch(0.74 0.12 172); --accent-hover: oklch(0.8 0.12 172); --accent-active: oklch(0.68 0.12 172);
    --ring: oklch(0.55 0.1 172); --accent-soft: oklch(0.26 0.04 172); --on-accent: oklch(0.175 0.012 215);
    --inner: oklch(0.76 0.12 295); --inner-ink: oklch(0.86 0.08 295); --inner-soft: oklch(0.26 0.04 295);
    --frame: oklch(0.3 0.013 215);
    --bg: oklch(0.175 0.012 215);   /* = --n1 */
    --badge-bg: var(--n3);  --badge-ink: var(--n12);  --badge-line: var(--n7);
    --shadow-1: 0 1px 2px oklch(0 0 0 / 0.4), 0 0 0 1px oklch(1 0 0 / 0.06);
    --shadow-2: 0 1.5rem 3rem -1.5rem oklch(0 0 0 / 0.7);
  }
}

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