/*
  Design tokens.

  Light is the default theme. [data-theme="dark"] overrides every colour token. The app sets the
  attribute on <body>; any element may carry it to theme its subtree (the component gallery does).

  Contrast (WCAG 2.x, both themes): --fg-0, --fg-1 and --fg-2 pass 4.5:1 on --bg-0, --bg-1 and --bg-2;
  --fg-2 does not pass on --bg-3, so muted text never sits on --bg-3. The accent, status and domain
  colours pass 4.5:1 as text only on --bg-0 and --bg-1 (in the light theme several fall below it on
  --bg-2 and --bg-3), so badges and chips carry their colour in a dot and keep their text neutral.
  --accent-fg passes on --accent. --line is decorative (about 1.4:1); --line-strong passes 3:1 for
  form-control borders on --bg-0 to --bg-2.
*/

:root {
  /* Spacing on 4 8 12 16 24 32 48 64. --space is the density unit: lower it to tighten the whole UI. */
  --space: 4px;
  --s-1: var(--space);
  --s-2: calc(var(--space) * 2);
  --s-3: calc(var(--space) * 3);
  --s-4: calc(var(--space) * 4);
  --s-5: calc(var(--space) * 6);
  --s-6: calc(var(--space) * 8);
  --s-7: calc(var(--space) * 12);
  --s-8: calc(var(--space) * 16);

  --r-1: 10px;
  --r-2: 16px;
  --r-3: 24px;

  --t-fast: 150ms;
  --t-med: 250ms;
  --ease: cubic-bezier(.2, .8, .2, 1);

  /* Type: a 1.2 scale above the 15px body size; nothing is set below 13px. */
  --font-ui: "Inter Variable", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --fs-0: 13px;
  --fs-1: 15px;
  --fs-2: 18px;
  --fs-3: 21.6px;
  --fs-4: 26px;
  --fs-5: 31px;
  --fs-6: 37px;
  --lh-tight: 1.2;
  --lh-ui: 1.45;
  --lh-read: 1.6;
  /* 58ch sets about 72 characters of Inter text a line: its "0", which defines ch, is wider than an average letter. */
  --measure: 58ch;

  --rail-w: 72px;
  --rail-w-open: 236px;
  --ops-w: 304px;
}

@media (min-width: 2560px) {
  :root {
    --ops-w: 440px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 0ms;
    --t-med: 0ms;
  }
}

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

  --bg-0: #FFFFFF;
  --bg-1: #FFFFFF;
  --bg-2: #E7F0FD;
  --bg-3: #DCE8F9;
  --fg-0: #203553;
  --fg-1: #435873;
  --fg-2: #4F627C;
  --line: #D3DFEF;
  --line-strong: #7D8A9F;

  --accent: #0866D9;
  --accent-fg: #FFFFFF;
  --hero: #0866D9;
  --outer: #DCEAFF;
  --blue-soft: #E5F0FF;
  --blue-mid: #DCEBFC;
  --blue-pale: #F0F7FF;
  --ok: #047857;
  --warn: #B45309;
  --danger: #BE123C;
  --info: #1D4ED8;

  --d-id: #1D4ED8;
  --d-ep: #175DAD;
  --d-nw: #09668C;
  --d-cd: #3558A4;
  --d-so: #254C87;
  --d-sv: #14629D;
  --tint-max: 60%;

  --shadow-1: 0 1px 2px rgb(30 62 105 / .08), 0 4px 0 -1px rgb(30 62 105 / .04), 0 12px 20px -14px rgb(30 62 105 / .24);
  --shadow-2: 0 2px 4px rgb(30 62 105 / .1), 0 16px 32px -18px rgb(30 62 105 / .28);
  --workspace-inset: inset 0 1px 2px rgb(30 62 105 / .06), inset 0 0 12px rgb(30 62 105 / .035);
  --overlay: rgb(15 26 43 / 0.42);
}

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

  --bg-0: #0B1220; /* canvas: the stage */
  --bg-1: #111A2B; /* surfaces: cards, rail, ops column */
  --bg-2: #182338; /* raised, hover, code */
  --bg-3: #1F2C45; /* pressed, tracks */
  --fg-0: #E6EDF7; /* headings, primary text */
  --fg-1: #B6C2D6; /* body and secondary text */
  --fg-2: #97A5BC; /* muted text, including tinted cards */
  --line: #27354F;
  --line-strong: #5F6E8A;

  --accent: #82B7FF;
  --accent-fg: #10274A;
  --hero: #1765D2;
  --outer: #080F1C;
  --blue-soft: #1B2D48;
  --blue-mid: #203653;
  --blue-pale: #17283F;
  --ok: #22C55E; /* green status, distinct from the blue accent */
  --warn: #FBBF24;
  --danger: #FB7185;
  --info: #60A5FA;

  --d-id: #79AEFF;
  --d-ep: #93BCF2;
  --d-nw: #71C6ED;
  --d-cd: #A2BEF5;
  --d-so: #81ACEA;
  --d-sv: #88C7F5;
  /* The strongest domain tint behind --fg-0 text (the competency grid's fill, mixed into --bg-1):
     every domain colour keeps 4.6:1 up to 43% in this theme and 68% in the light one. */
  --tint-max: 40%;

  --shadow-1: 0 2px 4px rgb(0 0 0 / 0.3), 0 12px 28px rgb(0 0 0 / 0.22);
  --shadow-2: 0 2px 6px rgb(0 0 0 / 0.3), 0 16px 40px rgb(0 0 0 / 0.45);
  --workspace-inset: inset 1px 0 var(--line), inset -1px 0 var(--line);
  --overlay: rgb(3 7 15 / 0.68);
}