/* Rebine design tokens.
   Black and white carries structure. Colour carries state only.

   Light is the default theme and is applied to every device regardless of the
   operating system setting. Dark is an override, reached only when the reader
   asks for it. Light lives on :root as well as its own attribute so that a page
   with no data-theme at all still renders correctly. */

:root,
[data-theme="light"] {
  color-scheme: light;

  /* Neutral ramp */
  --bg: #f6f6f6;
  --bg-deep: #ffffff;
  --surface: #ffffff;
  --surface-2: #f0f0f0;
  --surface-3: #e9e9e9;
  --line: #e2e2e2;
  --line-strong: #bdbdbd;
  --brick: rgba(0, 0, 0, 0.05);
  --brick-strong: rgba(0, 0, 0, 0.08);
  --text: #0a0a0a;
  --text-2: #4f4f4f;
  --text-3: #767676;
  --invert-bg: #0a0a0a;
  --invert-text: #fafafa;
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.09);
  --nav-bg: rgba(246, 246, 246, 0.78);
  --glow: rgba(0, 0, 0, 0.05);
  --hl-band: rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] {
  color-scheme: dark;

  --bg: #050505;
  --bg-deep: #000000;
  --surface: #0b0b0b;
  --surface-2: #121212;
  --surface-3: #181818;
  --line: #1f1f1f;
  --line-strong: #333333;
  --brick: rgba(255, 255, 255, 0.045);
  --brick-strong: rgba(255, 255, 255, 0.075);
  --text: #f5f5f5;
  --text-2: #a1a1a1;
  --text-3: #6f6f6f;
  --invert-bg: #f5f5f5;
  --invert-text: #050505;
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  --nav-bg: rgba(5, 5, 5, 0.72);
  --glow: rgba(255, 255, 255, 0.08);
  --hl-band: rgba(255, 255, 255, 0.11);
}

:root {
  /* State palette. The only colour allowed in the product. */
  --ok: #3ecf8e;
  --warn: #e3b341;
  --err: #f04b4b;
  --info: #4f9dff;
  --ok-soft: rgba(62, 207, 142, 0.12);
  --warn-soft: rgba(227, 179, 65, 0.12);
  --err-soft: rgba(240, 75, 75, 0.12);
  --info-soft: rgba(79, 157, 255, 0.12);

  /* Type */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo,
    Consolas, "Liberation Mono", monospace;

  --fs-mono: 0.6875rem;
  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-base: 0.9375rem;
  --fs-md: 1.0625rem;
  --fs-lg: 1.375rem;
  --fs-xl: clamp(1.6rem, 3.2vw, 2.25rem);
  --fs-2xl: clamp(2.1rem, 5vw, 3.25rem);
  --fs-display: clamp(2.8rem, 9vw, 7rem);

  /* Space, eight point rhythm */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 40px;
  --s8: 56px;
  --s9: 72px;
  --s10: 96px;
  --s11: 128px;
  --s12: 176px;

  --section-y: clamp(96px, 12vw, 176px);
  --gutter: clamp(20px, 5vw, 64px);
  --max: 1440px;
  /* Resting width of the rail. Labels float outside it, so this stays compact
     and never collides with the content column. */
  --rail-w: 86px;

  /* Shape */
  --r: 4px;
  --r-lg: 8px;
  --r-pill: 999px;
  --hair: 1px;

  /* Motion */
  --t-micro: 120ms;
  --t-base: 220ms;
  --t-slow: 420ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* Grid brick geometry */
  --brick-col: 64px;
  --brick-row: 32px;
}