/*
  Design tokens. Every colour, size and radius used by site.css comes from here.
  --accent is set per chapter from the profile's accent_color (inline <style>
  with a CSP nonce); the showcase sets its own product accent below.
*/

:root {
  color-scheme: light dark;

  /* Type */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif;
  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Charter, "Bitstream Charter", Georgia, serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --font-display: var(--font-sans);

  --step--2: 0.75rem;
  --step--1: 0.875rem;
  --step-0: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --step-1: clamp(1.15rem, 1.08rem + 0.35vw, 1.3rem);
  --step-2: clamp(1.35rem, 1.2rem + 0.7vw, 1.65rem);
  --step-3: clamp(1.65rem, 1.4rem + 1.2vw, 2.2rem);
  --step-4: clamp(2rem, 1.6rem + 2vw, 3rem);
  --step-5: clamp(2.4rem, 1.8rem + 3.2vw, 4.1rem);

  --leading-tight: 1.12;
  --leading-snug: 1.3;
  --leading-body: 1.6;

  /* Space (4px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 6.5rem;
  --gutter: 1rem;
  --measure: 65ch;
  --wrap: 72rem;

  /* Radius */
  --radius-s: 6px;
  --radius-m: 12px;
  --radius-l: 20px;
  --radius-pill: 999px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 180ms;

  /* Light palette */
  --bg: #fbfaf7;
  --bg-tint: #f4f1ea;
  --surface: #ffffff;
  --surface-2: #f5f3ee;
  --ink: #1b1e22;
  --ink-2: #454a52;
  --ink-3: #676c74;
  --line: #e3dfd6;
  --line-strong: #cfc9bd;
  --danger: #b42318;
  --danger-soft: #fdecea;
  --success: #1c7a4a;
  --success-soft: #e7f5ed;
  --warn: #8a5a00;
  --warn-soft: #fdf3dc;
  --sky-1: #dbe9f4;
  --sky-2: #f7efe2;
  --ground: #e6dfcf;
  --shadow-1: 0 1px 2px rgb(20 20 20 / 0.06), 0 1px 1px rgb(20 20 20 / 0.04);
  --shadow-2: 0 8px 24px -8px rgb(20 20 20 / 0.16), 0 2px 6px rgb(20 20 20 / 0.06);

  --accent: #2f6f5e;
  --accent-ink: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121416;
    --bg-tint: #171a1d;
    --surface: #1a1d21;
    --surface-2: #20242a;
    --ink: #edebe7;
    --ink-2: #c3c0ba;
    --ink-3: #9a978f;
    --line: #2d3238;
    --line-strong: #3d434a;
    --danger: #ff8a7a;
    --danger-soft: #3a1d1a;
    --success: #6fd3a0;
    --success-soft: #16301f;
    --warn: #f4c46a;
    --warn-soft: #33290f;
    --sky-1: #1b2633;
    --sky-2: #221f1c;
    --ground: #23211d;
    --shadow-1: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-2: 0 10px 30px -10px rgb(0 0 0 / 0.6), 0 2px 6px rgb(0 0 0 / 0.3);

  }
}

/*
  Accent derivatives are declared on the site root element, not :root, so they
  resolve against whichever --accent that element ends up with (chapter
  profile or showcase product accent).
*/
[data-site] {
  --accent-strong: color-mix(in oklab, var(--accent) 82%, black);
  --accent-soft: color-mix(in oklab, var(--accent) 12%, var(--surface));
  --accent-line: color-mix(in oklab, var(--accent) 35%, var(--line));
  --accent-text: color-mix(in oklab, var(--accent) 88%, black);
  --focus: color-mix(in oklab, var(--accent) 70%, #1a5fff);
}

@media (prefers-color-scheme: dark) {
  [data-site] {
    --accent-strong: color-mix(in oklab, var(--accent) 70%, white);
    --accent-soft: color-mix(in oklab, var(--accent) 22%, var(--surface));
    --accent-line: color-mix(in oklab, var(--accent) 45%, var(--line));
    --accent-text: color-mix(in oklab, var(--accent) 55%, white);
    --focus: color-mix(in oklab, var(--accent) 50%, #8fb4ff);
  }
}

/* Site characters */

[data-site="chapter"] {
  --font-display: var(--font-serif);
}

[data-site="showcase"] {
  --accent: #3346d3;
  --accent-ink: #ffffff;
  --signal: #f2b544;
  --bg: #f8f9fb;
  --bg-tint: #eef1f7;
  --surface-2: #f1f3f8;
  --line: #e1e5ee;
  --line-strong: #c9cfdc;
  --ink: #111726;
  --ink-2: #3f4658;
  --ink-3: #626a7d;
  --navy: #0e1629;
}

@media (prefers-color-scheme: dark) {
  [data-site="showcase"] {
    --bg: #0b0f1a;
    --bg-tint: #101626;
    --surface: #131a2b;
    --surface-2: #182036;
    --line: #242d45;
    --line-strong: #323c58;
    --ink: #eef1f8;
    --ink-2: #bcc3d6;
    --ink-3: #8c94aa;
    --navy: #070b15;
  }
}