/* ═══ ANNOTATION · css/tokens.css ═══
   WHAT:   Every colour, texture, font and size the site uses, in one place (Lithic Aero).
           Block 1 = Watchtower (SFW, the default). Block 2 = Abyssal (18+), which only
           overrides values. Components never hard-code a colour: they read these tokens.
   STONE:  Each theme sets ONE stone colour; bevels, troughs and edges are derived from it
           with relative colour syntax (oklch(from …)). Retheme = change --stone + --mana.
   READ:   The --read-* tokens are the reading surfaces (lesson text, prompts, tables).
           They are flat and contrast-checked: keep text ≥ 4.5:1 on --read-bg.
   ADD:    A new colour? Add it to BOTH theme blocks, then use var(--your-token).
   PERF:   No colour here is animated. The theme change is one restyle inside a view
           transition (js/theme.js), not 1.2 s of per-frame colour interpolation.
*/

/* ── Fonts (self-hosted, SIL Open Font Licence; licences in /fonts) ───────── */
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-display: swap; src: url("../fonts/barlow-condensed-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-display: swap; src: url("../fonts/barlow-condensed-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 400; font-display: swap; src: url("../fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 400; font-style: italic; font-display: swap; src: url("../fonts/atkinson-hyperlegible-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 700; font-display: swap; src: url("../fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 700; font-style: italic; font-display: swap; src: url("../fonts/atkinson-hyperlegible-latin-700-italic.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 400; font-display: swap; src: url("../fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 600; font-display: swap; src: url("../fonts/jetbrains-mono-latin-600-normal.woff2") format("woff2"); }

/* ── Registered properties ─────────────────────────────────────────────────
   --pour: how far mana has filled a carved groove (animated on hover).
   --pits-l: weathering chips; non-inheriting so they never leak onto nested stones. */
@property --pour   { syntax: "<percentage>"; inherits: true; initial-value: 0%; }
@property --fill   { syntax: "<percentage>"; inherits: true; initial-value: 0%; }
@property --pits-l { syntax: "*"; inherits: false; }

/* ── Block 1 · Watchtower Aero (SFW, default) ─────────────────────────────── */
:root,
:root[data-theme="watchtower"] {
  color-scheme: dark;

  /* page: the old watchtower wall (assets/decor/wall-*.webp) */
  --page-bg: #0c1a22;
  --wall: url("../assets/decor/wall-watchtower.webp");

  /* stone: weathered honed slate; everything derives from --stone */
  --stone:      oklch(0.62 0.008 80);
  --stone-2:    oklch(from var(--stone) calc(l - 0.045) c h);   /* lower face; shallow so ink on stone keeps contrast */
  --bevel-hi:   oklch(from var(--stone) calc(l + 0.13) c h);    /* moonlit edge, top-left */
  --bevel-lo:   oklch(from var(--stone) calc(l - 0.30) c h);    /* chiselled depth, bottom-right */
  --edge:       oklch(from var(--stone) calc(l - 0.40) c h);    /* 1 px outer outline */
  --recess-1:   oklch(from var(--stone) calc(l - 0.24) c h);    /* sunken trough */
  --recess-2:   oklch(from var(--stone) calc(l - 0.30) c h);
  --seam-tint:  oklch(0.50 0.08 145 / 0.5);                     /* moss in the seams */
  --sheen:      linear-gradient(transparent, transparent);

  /* carving (intaglio): groove shadowed at the top, one catch-light on the lower lip */
  --carve:      oklch(0.27 0.006 80);
  --carve-deep: oklch(0.12 0.005 80);
  --carve-lo:   oklch(0.17 0.005 80);
  --carve-hi:   oklch(from var(--stone) calc(l + 0.17) c h);

  /* ink directly on raised stone (small text): dark on light slate */
  --ink-stone:     oklch(0.17 0.006 80);     /* 5.3:1 top / 4.4:1 bottom of a slab */
  --ink-stone-dim: oklch(0.25 0.008 80);
  --accent-stone:  oklch(0.25 0.06 195);

  /* light */
  --mana:       oklch(0.87 0.17 177);        /* aether cyan  #00F5D4 */
  --mana-2:     oklch(0.74 0.15 232);        /* mana azure   #00BBF9 */
  --mana-3:     oklch(0.80 0.19 152);        /* spring emerald */
  --mana-text:  oklch(0.96 0.06 177);        /* groove filled with light */
  --glow:       oklch(from var(--mana) l c h / 0.55);
  --glow-soft:  oklch(from var(--mana) l c h / 0.22);
  --crack-glow: oklch(from var(--mana) l c h / 0.9);
  --socket-gem: #c77dff;                     /* the 18+ crystal is always violet */

  /* textures: pre-rendered tileable bitmaps (no live SVG filters) */
  --grain:  url("../assets/decor/tex-grain.webp") 0 0 / 180px 180px;
  --mottle: url("../assets/decor/tex-mottle.webp") 0 0 / 420px 420px;
  --grain-blend: overlay;
  --mottle-layer: var(--mottle);
  --pits: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='44'%3E%3Cpath d='M80 13 L85 11 L89 15 L87 20 L81 20 L78 17Z' fill='rgba(255,255,255,.1)' transform='translate(1 1.3)'/%3E%3Cpath d='M80 13 L85 11 L89 15 L87 20 L81 20 L78 17Z' fill='rgba(0,0,0,.24)'/%3E%3Cpath d='M30 28 L34 26 L37 29 L35 33 L31 33Z' fill='rgba(255,255,255,.1)' transform='translate(1 1.3)'/%3E%3Cpath d='M30 28 L34 26 L37 29 L35 33 L31 33Z' fill='rgba(0,0,0,.24)'/%3E%3Cpath d='M101 31 L104 30 L106 33 L103 35Z' fill='rgba(0,0,0,.22)'/%3E%3C/svg%3E");

  /* reading surfaces (flat, high contrast, no texture) */
  --read-bg: #45423e;            /* the trough floor */
  --read-bg-2: #3a3834;          /* inset boxes: code, prompts */
  --read-line: #5d5a55;          /* hairlines */
  --read-text: #f4f2ee;          /* 8.9:1 on --read-bg */
  --read-muted: #d3d0ca;         /* 6.1:1 on --read-bg */
  --read-accent: #00f5d4;        /* 7.1:1 on --read-bg */
  --ok: #7ee8a6;
  --warn: #ffd27a;
  --bad: #ff9a8a;

  /* Line Chunk badges (always shown with their number, never colour alone) */
  --line-1: #8ec5ff;   /* sky blue */
  --line-2: #ffa66b;   /* orange */
  --line-3: #00f5d4;   /* aether cyan */
  --line-4: #b8f27a;   /* lime */
  --line-5: #ff9ad8;   /* pink */
  --line-6: #f7e36b;   /* yellow */
  --line-7: #c7a8ff;   /* lavender */
  --line-neg: #ff7a7a; /* red */

  /* compatibility aliases (older names still used in a few places) */
  --glow-1: var(--mana);
  --glow-2: var(--mana-2);
  --glow-1-soft: var(--glow);
  --bevel-light: var(--bevel-hi);
  --bevel-dark: var(--bevel-lo);
  --stone-top: var(--stone);
  --stone-bottom: var(--stone-2);
  --carve-fill: var(--carve);
  --carve-awake: var(--mana-text);
}

/* ── Block 2 · Abyssal Aero (18+, only after confirmation) ──────────────────
   The tower has been taken: new, polished blackstone that repaired itself.
   No pits, no moss; a few cracks glow pink and the organism crawls out of them. */
:root[data-theme="abyssal"] {
  --page-bg: #120a16;
  --wall: url("../assets/decor/wall-abyssal.webp");

  --stone:      oklch(0.30 0.020 300);
  --stone-2:    oklch(from var(--stone) calc(l - 0.08) c h);
  --bevel-hi:   oklch(from var(--stone) calc(l + 0.14) calc(c + 0.02) h);
  --bevel-lo:   oklch(0.11 0.012 300);
  --edge:       oklch(0.07 0.01 300);
  --recess-1:   oklch(0.17 0.016 300);
  --recess-2:   oklch(0.13 0.014 300);
  --seam-tint:  transparent;
  --sheen:      linear-gradient(116deg, transparent 32%, oklch(1 0 0 / .075) 43%, transparent 55%);

  /* in black stone the grooves hold faint residual ichor: lighter than the stone */
  --carve:      oklch(0.74 0.06 310);
  --carve-deep: oklch(0.50 0.07 305);
  --carve-lo:   oklch(0.10 0.015 300);
  --carve-hi:   oklch(0.42 0.04 305);

  --ink-stone:     oklch(0.92 0.015 320);
  --ink-stone-dim: oklch(0.80 0.03 315);
  --accent-stone:  oklch(0.76 0.20 355);

  --mana:       oklch(0.64 0.26 2);          /* sinister magenta #FF1E8E */
  --mana-2:     oklch(0.53 0.23 335);        /* eldritch orchid  #B5179E */
  --mana-3:     oklch(0.58 0.22 305);        /* void violet */
  --mana-text:  oklch(0.86 0.12 350);
  --glow:       oklch(from var(--mana) l c h / 0.6);
  --glow-soft:  oklch(from var(--mana) l c h / 0.25);
  --crack-glow: oklch(from var(--mana) l c h / 0.95);
  --socket-gem: #ff5fb4;

  --grain-blend: soft-light;                 /* polished: same grain, half strength */
  --mottle-layer: linear-gradient(transparent, transparent);
  --pits: linear-gradient(transparent, transparent);

  --read-bg: #1e1b23;
  --read-bg-2: #15121a;
  --read-line: #37303f;
  --read-text: #ede6f2;          /* 13.9:1 */
  --read-muted: #c9bfd2;
  --read-accent: #ff85c8;        /* 7.6:1 */
  --ok: #8ff0c0;
  --warn: #ffcf8a;
  --bad: #ff8fa3;

  --line-1: #9cc4ff;
  --line-2: #ffad78;
  --line-3: #ff85c8;
  --line-4: #bff08a;
  --line-5: #e2a8ff;
  --line-6: #ffe08a;
  --line-7: #8ff0e0;
  --line-neg: #ff6f8a;
}

/* ── Shared sizes (both themes) ───────────────────────────────────────────── */
:root {
  --font-carved: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", Consolas, monospace;

  --text-base: 1.0625rem;       /* 17 px lesson text */
  --measure: 68ch;              /* comfortable reading line */

  /* chamfer scale (45° cuts). Bigger things get bigger cuts. */
  --c-xs: 6px; --c-s: 10px; --c-m: 16px; --c-l: 24px; --c-xl: 34px;
  --chamfer: var(--c-m);        /* older name */
  --chamfer-small: 8px;         /* older name */
  --bw: 3px;                    /* stone bevel width */
  --gap: 16px;
  --touch: 44px;                /* minimum touch target */

  --ease-stone: cubic-bezier(.3, .7, .2, 1);
}