/*
 * tuning-database.co.uk, v3 design tokens.
 *
 * Three layers: primitive -> semantic -> component. Components read semantic
 * tokens only, so the light scene is a re-scope of the semantic layer and no
 * component has to know which scene it is in. This is the only file that may
 * hold a colour value; tests/test-v3-no-slop.php enforces it, and
 * tests/test-v3-tokens-contrast.php checks every text colour against every
 * ground in both scenes.
 *
 * Same family as tuning-database.ro: warm graphite and paper instead of slate,
 * one accent, Barlow for words and JetBrains Mono for data.
 */

:root {
  /* -- primitive ---------------------------------------------------------- */
  --graphite-0: #161514;
  --graphite-1: #1f1e1d;
  --graphite-2: #191817;
  --graphite-3: #2a2928;
  --graphite-4: #353331;
  --graphite-line: #3a3836;
  --graphite-rule: #77726c;

  --paper-0: #ffffff;
  --paper-1: #f4f2ee;
  --paper-2: #ebe8e3;
  --paper-3: #e2ded8;
  --paper-line: #dcd8d2;
  --paper-rule: #8c867f;

  --chalk-1: #f4f2ef;
  --chalk-2: #cbc7c2;
  --chalk-3: #a8a49e;
  --coal-1: #1b1a19;
  --coal-2: #45423e;
  --coal-3: #5d5954;

  --signal-1: #f59a5c;   /* orange as type on graphite */
  --signal-2: #e8702a;   /* orange as a surface on graphite */
  --signal-3: #b4470d;   /* orange as a surface on paper */
  --signal-4: #a2420b;   /* orange as type on paper */
  --signal-ink: #1a0f06; /* type on an orange surface, dark scene */

  --ok-1: #6fcf8e;
  --ok-2: #1d7a3e;
  --warn-1: #f2c14e;
  --warn-2: #8a5a00;
  --bad-1: #ff8a7a;
  --bad-2: #b3261e;

  --font-sans: "Barlow", "Bahnschrift", "DIN Alternate", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", "Cascadia Mono", "SF Mono", Consolas, "Liberation Mono", monospace;

  /* Type: a 1.25 ratio, fluid between 360 and 1440 px wide. */
  --step--1: clamp(0.8rem, 0.78rem + 0.1vw, 0.875rem);
  --step-0: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --step-1: clamp(1.125rem, 1.07rem + 0.25vw, 1.25rem);
  --step-2: clamp(1.35rem, 1.24rem + 0.5vw, 1.6rem);
  --step-3: clamp(1.6rem, 1.4rem + 0.95vw, 2.15rem);
  --step-4: clamp(2rem, 1.65rem + 1.6vw, 2.9rem);
  --step-5: clamp(2.4rem, 1.85rem + 2.5vw, 3.9rem);

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

  /* Space: a 4 px base. */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  --measure: 66ch;
  --page-max: 1200px;
  --gutter: clamp(16px, 4vw, 40px);

  --radius-1: 4px;
  --radius-2: 8px;
  --radius-pill: 999px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-1: 140ms;
  --dur-2: 280ms;
  --dur-3: 600ms;

  /* -- semantic: the dark scene ------------------------------------------- */
  --bg: var(--graphite-1);
  --bg-sunk: var(--graphite-2);
  --bg-raised: var(--graphite-3);
  --bg-hover: var(--graphite-4);
  --ink: var(--chalk-1);
  --ink-2: var(--chalk-2);
  --ink-3: var(--chalk-3);
  --line: var(--graphite-line);
  --line-strong: var(--graphite-rule);
  --accent: var(--signal-2);
  --accent-ink: var(--signal-1);
  --on-accent: var(--signal-ink);
  --link: var(--signal-1);
  --focus: var(--signal-1);
  --ok: var(--ok-1);
  --warn: var(--warn-1);
  --bad: var(--bad-1);
  --shadow-float: 0 12px 32px -12px var(--graphite-0);
  --scrim: var(--graphite-0);

  /* -- component ---------------------------------------------------------- */
  --header-bg: var(--graphite-2);
  --field-bg: var(--graphite-2);
  --field-line: var(--line-strong);
  --btn-bg: var(--accent);
  --btn-ink: var(--on-accent);
  --btn-2-line: var(--line-strong);
  --code-bg: var(--graphite-2);
  --mark-a: var(--signal-2);
  --mark-b: var(--chalk-2);

  color-scheme: dark;
}

/* The light scene, chosen with the toggle. */
:root[data-theme="light"] {
  --bg: var(--paper-1);
  --bg-sunk: var(--paper-2);
  --bg-raised: var(--paper-0);
  --bg-hover: var(--paper-3);
  --ink: var(--coal-1);
  --ink-2: var(--coal-2);
  --ink-3: var(--coal-3);
  --line: var(--paper-line);
  --line-strong: var(--paper-rule);
  --accent: var(--signal-3);
  --accent-ink: var(--signal-4);
  --on-accent: var(--paper-0);
  --link: var(--signal-4);
  --focus: var(--coal-1);
  --ok: var(--ok-2);
  --warn: var(--warn-2);
  --bad: var(--bad-2);
  --shadow-float: 0 12px 32px -14px var(--paper-rule);
  --scrim: var(--coal-1);
  --header-bg: var(--paper-0);
  --field-bg: var(--paper-0);
  --code-bg: var(--paper-2);
  --mark-b: var(--coal-2);
  color-scheme: light;
}

/* The light scene, when the visitor never chose and their system is light. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: var(--paper-1);
    --bg-sunk: var(--paper-2);
    --bg-raised: var(--paper-0);
    --bg-hover: var(--paper-3);
    --ink: var(--coal-1);
    --ink-2: var(--coal-2);
    --ink-3: var(--coal-3);
    --line: var(--paper-line);
    --line-strong: var(--paper-rule);
    --accent: var(--signal-3);
    --accent-ink: var(--signal-4);
    --on-accent: var(--paper-0);
    --link: var(--signal-4);
    --focus: var(--coal-1);
    --ok: var(--ok-2);
    --warn: var(--warn-2);
    --bad: var(--bad-2);
    --shadow-float: 0 12px 32px -14px var(--paper-rule);
    --scrim: var(--coal-1);
    --header-bg: var(--paper-0);
    --field-bg: var(--paper-0);
    --code-bg: var(--paper-2);
    --mark-b: var(--coal-2);
    color-scheme: light;
  }
}