/* Tuning axes, 0 to 1. JS reads them live (js/state.js). */
:root {
  --fnd-energy: 0.5;   /* Still -> Lively: noise, morph duration, wordmark breathing */
  --fnd-texture: 0.4;  /* Clean -> Worn: grain, displacement, ink spread */
  --fnd-focus: 0.6;    /* Dreamy -> Focused: how far inactive items recede */
  --fnd-density: 0.3;  /* Airy -> Packed: column gaps, paragraph spacing */
  --fnd-life: 0;       /* Dormant -> Alive: the wordmark's life. 0 = follow resonance; above 0 overrides it */
  --fnd-glow: 0.5;     /* Subtle -> Radiant: the new marker's halo strength and reach */
  --fnd-sparkle: 0.5;  /* Still -> Lively: its motes, pulse ring, bob and shimmer */
  --fnd-orbsize: 0.5;  /* Tiny -> Bold: its core, 6 to 8px */
  --fnd-warmth: 0.35;  /* Gold -> Amber: its colour */
  /* the gallery grids (js/grids/*). Energy is the site's own --fnd-energy above:
     the Library reads it as is (the pull's speed, the spring in the tip), Experiments and Coffee table at 0.8 of it (0.4 at the default) */
  --fnd-tone: 0.2;     /* Ink -> Colour: how much of the image's colour the Experiments glyphs carry */
  --fnd-spine-order: 0.4;  /* Library. Neat -> Leaning: a few books lean, the gaps loosen, a neighbour leans into a gap */
  --fnd-spine-depth: 0.45; /* Library. Flat -> Deep: how close the eye stands, how far a spine tips out */
  --fnd-spine-tone: 0.85;  /* Library. Ink -> Colour: spines of plain paper, up to each cover's own colour */
  --fnd-res: 0.6;      /* Experiments. Coarse -> Fine: the glyph cell, 16px to 7px */
  --fnd-reveal: 0.5;   /* Experiments. Tight -> Wide: the lens radius, 48px to 220px */
  --fnd-order: 0.45;   /* Coffee table. Stacked neat -> Scattered: rotation and drift off the grid */
  --fnd-light: 0.65;   /* Coffee table. Flat -> Raking: the cursor light's height, its pool and shadow length */
  --fnd-depth: 0.55;   /* Coffee table. Flat prints -> Thick objects: book thickness, 2px to 34px */

  --orb-core: #FFC81A;
  --orb-edge: #FA9608;
  --orb-halo: #FFB21A;

  /* type */
  --ui: "Inter Display", "ABC Favorit Arabic Trial", "Helvetica Neue", Arial, sans-serif;
  --serif: "Shinka", Georgia, serif;
  --mono: "ABC Favorit Mono Trial", "SF Mono", ui-monospace, Menlo, monospace;
  --track: -0.64px;

  /* spacing, driven by density (24px and 16px at 0.3, as in the frame) */
  --gap: calc(24px + (0.3 - var(--fnd-density)) * 20px);
  --para: calc(16px + (0.3 - var(--fnd-density)) * 14px);
  --stack: 4px;

  /* focus: 4px blur and .39 opacity at 0.6, as in the frame */
  --blur-rest: calc(4px * (0.4 + var(--fnd-focus)));
  --op-rest: calc(0.85 - 0.766 * var(--fnd-focus));
  --blur-peek: calc(var(--blur-rest) * 0.375);
  --op-peek: calc((var(--op-rest) + 1) / 2);

  /* motion: the canonical curve is think() in js/tokens.js; this bezier is its CSS stand-in */
  --motion-resolve: calc(600ms - 180ms * var(--fnd-energy));
  --motion-stagger: 12ms;
  --ease-think: cubic-bezier(0.1, 0.72, 0.9, 0.28);
  --ease-land: cubic-bezier(0.2, 0, 0, 1);
}

/* ---------- themes ----------
   Semantic colour tokens, keyed by html[data-theme] (and html[data-accent] for
   Marathon). The attributes are set before first paint by the inline script in
   index.html and changed live by js/theme.js, which tells the GL layers, grain
   and grids with a 'theme:change' event. A [data-theme] probe element gets the
   same values (the debug panel's swatches read them that way).
   --paper, --ink       the page and its type
   --dot                quiet fills: the dot buttons at rest, slate surfaces
   --glow               the "new" marker and found-secret traces
   --ok                 the success check
   --accent             the theme's colour, as a fill
   --accent-text        the accent where it is type on paper (AA)
   --accent-mark        the accent where it is a small non-text mark on paper (3:1)
   --accent-wash        the accent as a highlight behind ink (ink on it is AA)
   --on-accent          type on an --accent fill
   --ring               focus rings
   --signal             the second colour, used sparingly (Marathon only)
   --tint               what the Library dots and Experiments glyphs lean to at Tone
   --swell              the wordmark's colour at the peak of a "thinking" swell
   --shade, --shadow    a cast shadow on the Coffee table; the colour of UI shadows
   --shadow-k           how much stronger UI shadows are than on white
   --warm, --warm-halo  the warm words' glow
   --muted              secondary type (also --op-meta, --op-faint as opacities)
   --grain-k            the grain's strength against this paper */
:root, [data-theme] {
  color-scheme: light;
  --paper: #fff;
  --ink: #000;
  --dot: #e0e0e0;
  --glow: #FFC81A;
  --ok: #1e9e57;
  --accent: #000;
  --accent-text: var(--ink);
  --accent-mark: var(--ink);
  --accent-wash: transparent;
  --on-accent: var(--paper);
  --ring: var(--ink);
  --signal: var(--ink);
  --tint: var(--ink);
  --swell: var(--ink);
  --shade: #dad8d6;
  --shadow: #000;
  --shadow-k: 1;
  --warm: #d69600;
  --warm-halo: #ffc400;
  --select-bg: var(--ink);
  --select-fg: var(--paper);
  --op-meta: 0.56;
  --op-faint: 0.39;
  --grain-k: 1;
  --foot: var(--ink);
  --muted: color-mix(in srgb, var(--ink) calc(var(--op-meta) * 100%), var(--paper));
}
[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0b0b0c;
  --ink: #ece8e1;
  --dot: #2b2a28;
  --glow: #FFC81A;
  --ok: #3ecf7e;
  --accent: var(--ink);
  --shade: #000;
  --shadow: #000;
  --shadow-k: 2.4;
  --warm: #ffb81a;
  --warm-halo: #ffc400;
  --op-meta: 0.6;
  --op-faint: 0.5;
  --grain-k: 1.5;
  --blend-ink: screen;
}
/* Marathon: the acid graphic look. One accent (data-accent), the others as signals. */
[data-theme="marathon-dark"] {
  color-scheme: dark;
  --paper: #0b0b0c;               /* the dark theme's paper, no navy */
  --ink: #ece8e1;
  --dot: #2b2a28;
  --foot: var(--accent);          /* footer wordmark, marks and bio in the accent */
  --accent: #c2fe0b;
  --accent-text: var(--accent);
  --accent-mark: var(--accent);
  --accent-wash: var(--accent);
  --on-accent: #0b0b0c;
  --signal: #01ffff;
  --glow: var(--accent);
  --ok: var(--accent);
  --ring: var(--accent-mark);
  --tint: var(--signal);
  --swell: var(--signal);
  --shade: #000;
  --shadow: #000;
  --shadow-k: 2.4;
  --warm: var(--accent);
  --warm-halo: var(--accent);
  --select-bg: var(--accent);
  --select-fg: var(--on-accent);
  --op-meta: 0.64;
  --op-faint: 0.52;
  --grain-k: 1.4;
  --blend-ink: screen;
}
[data-theme="marathon-dark"][data-accent="cyan"] { --accent: #01ffff; --signal: #c2fe0b; }
[data-theme="marathon-dark"][data-accent="red"] { --accent: #ff0d1a; --accent-text: #ff4d55; --accent-mark: #ff4d55; --ok: #59b41d; --on-accent: #fff; }
[data-theme="marathon-dark"][data-accent="amber"] { --accent: #ffb000; }
[data-theme="marathon-dark"][data-accent="green"] { --accent: #59b41d; }
[data-theme="marathon-light"] {
  color-scheme: light;
  --foot: var(--accent-mark);     /* the accent, deepened so it reads on light paper */
  --paper: #f1f3f7;
  --ink: #29324f;
  --dot: #d5dae4;
  --accent: #c2fe0b;
  --accent-text: var(--ink);       /* lime is never type on light paper: it sits behind it */
  --accent-mark: #587c00;
  --accent-wash: var(--accent);
  --on-accent: var(--ink);
  --signal: #ff0d1a;
  --glow: var(--accent);
  --ok: #38801a;
  --ring: var(--accent-mark);
  --tint: var(--ink);
  --swell: var(--signal);
  --shade: #c3c9d6;
  --shadow: #29324f;
  --shadow-k: 1.2;
  --warm: #8fbf00;
  --warm-halo: var(--accent);
  --select-bg: var(--accent-wash);
  --select-fg: var(--ink);
  --op-meta: 0.78;
  --op-faint: 0.72;
  --grain-k: 1.1;
}
[data-theme="marathon-light"][data-accent="cyan"] { --accent: #01ffff; --accent-mark: #007f88; --warm: #00b3bf; }
[data-theme="marathon-light"][data-accent="red"] { --accent: #ff0d1a; --accent-wash: #f88088; --accent-mark: #e00012; --signal: #fd6c1d; --warm: #ff0d1a; }
[data-theme="marathon-light"][data-accent="amber"] { --accent: #ffb000; --accent-wash: #ffd47a; --accent-mark: #9a6200; --warm: #e09a00; }
[data-theme="marathon-light"][data-accent="green"] { --accent: #59b41d; --accent-wash: #96cd74; --accent-mark: #38801a; --warm: #59b41d; }