/* =========================================================
   Vesper design tokens
   Surface colours, accent and radius are set at runtime by
   applyTheme() in js/core.js; the values here are the
   defaults used before the theme loads.
   ========================================================= */

:root{
  /* ---- surfaces (runtime) ---- */
  --paper:#09090B;
  --surface:#18181B;
  --line:#34343B;
  --text:#FAFAFA;
  --text-2:#A1A1AA;
  --text-3:#7D7D86;
  --accent:#D1E2EC;
  --accent-text:#D1E2EC;
  --on-accent:#0B0B0D;
  --radius:12px;

  /* ---- derived surfaces ---- */
  --surface-2:color-mix(in srgb, var(--surface) 95%, var(--text));
  --surface-sunken:color-mix(in srgb, var(--paper) 70%, var(--surface));
  --hover:color-mix(in srgb, var(--text) 5%, transparent);
  --press:color-mix(in srgb, var(--text) 9%, transparent);
  /*
    Border scale, all 1px:
    --line         block edges: cards, panels, tables, inputs, modals
    --line-soft    dividers inside a block: rows, sections
    --line-strong  hover, active and emphasised edges
    The soft step is mixed with the surface (not made transparent) so it reads the same everywhere.
  */
  --line-soft:color-mix(in srgb, var(--line) 72%, var(--surface));
  --line-strong:color-mix(in srgb, var(--line) 62%, var(--text-3));
  --accent-wash:color-mix(in srgb, var(--accent) 12%, transparent);
  --accent-wash-strong:color-mix(in srgb, var(--accent) 22%, transparent);
  --accent-line:color-mix(in srgb, var(--accent) 45%, var(--line));
  --scrim:rgba(4, 4, 6, .62);

  /* ---- semantic ---- */
  --good:#4ADE80;
  --bad:#F87171;
  --warn:#FBBF24;
  --good-wash:color-mix(in srgb, var(--good) 11%, transparent);
  --bad-wash:color-mix(in srgb, var(--bad) 11%, transparent);
  --warn-wash:color-mix(in srgb, var(--warn) 11%, transparent);
  --good-line:color-mix(in srgb, var(--good) 38%, var(--line));
  --bad-line:color-mix(in srgb, var(--bad) 38%, var(--line));
  --warn-line:color-mix(in srgb, var(--warn) 38%, var(--line));

  /* ---- type ---- */
  --font-display:"Instrument Serif", ui-serif, Georgia, serif;
  --font-body:"Sniglet", ui-sans-serif, system-ui, sans-serif;
  --font-mono:"Autour One", ui-monospace, SFMono-Regular, monospace;
  /* editorial serif for page titles and glossary letters; not part of the editable theme */
  --font-serif:"Instrument Serif", "Cormorant Garamond", Georgia, serif;

  /* 1.2 modular scale from a 15px UI base */
  --fs-2xs:.75rem;     /* 12 — mono labels      */
  --fs-xs:.8125rem;    /* 13 — meta, hints      */
  --fs-sm:.875rem;     /* 14 — controls         */
  --fs-base:.9375rem;  /* 15 — body             */
  --fs-md:1.125rem;    /* 18 — card titles      */
  --fs-lg:1.375rem;    /* 22 — question text    */
  --fs-xl:1.625rem;    /* 26 — section titles   */
  --fs-2xl:2rem;       /* 32 — page titles      */
  --fs-3xl:2.5rem;     /* 40 — hero             */

  --lh-tight:1.15;
  --lh-snug:1.35;
  --lh-body:1.6;
  --tracking-tight:-.022em;
  --tracking-label:.09em;

  /* ---- space (4px grid) ---- */
  --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px; --s-5:20px;
  --s-6:24px; --s-7:28px; --s-8:32px; --s-10:40px; --s-12:48px; --s-16:64px;

  /* ---- shape ---- */
  --r-xs:calc(var(--radius) * .35);
  --r-sm:calc(var(--radius) * .6);
  --r-md:var(--radius);
  --r-lg:calc(var(--radius) * 1.35);
  --r-pill:999px;

  /* ---- layout ---- */
  --sidebar-w:272px;
  --sidebar-rail:72px;
  --content-w:1200px;
  --reading-w:780px;
  --control-h:40px;
  --control-h-sm:32px;
  --control-h-lg:46px;

  /* ---- elevation ---- */
  --shadow-sm:0 1px 2px rgba(0,0,0,.25);
  --shadow-md:0 8px 24px -8px rgba(0,0,0,.45);
  --shadow-lg:0 24px 64px -16px rgba(0,0,0,.6), 0 0 0 1px var(--line);
  --ring:0 0 0 3px var(--accent-wash-strong);

  /* ---- motion ---- */
  --ease-out:cubic-bezier(.22,.8,.24,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --ease-spring:cubic-bezier(.34,1.4,.64,1);
  --dur-1:120ms;
  --dur-2:200ms;
  --dur-3:320ms;
  --dur-4:480ms;
}

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