/* Design tokens. Every colour, radius and step used anywhere else lives here. */

:root {
  /* Type */
  --font-sans: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", "SF Mono", ui-monospace, "Cascadia Mono", monospace;

  --step--1: 0.8125rem;
  --step-0: 0.9375rem;
  --step-1: 1.0625rem;
  --step-2: 1.375rem;
  --step-3: 1.75rem;

  /* Space */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;

  /* Shape */
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 12px;
  --shell-width: 60rem;

  --transition: 140ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Light — the default. Cool paper, ink text, steel-blue accent. */
:root,
[data-theme="light"] {
  --paper: #edf0f4;
  --surface: #ffffff;
  --surface-2: #f4f6f9;
  --ink: #131a24;
  --ink-2: #59657a;
  --ink-3: #7d889a;
  --line: #d8dee7;
  --line-strong: #bcc6d4;

  --accent: #23508f;
  --accent-hover: #1b4079;
  --accent-ink: #ffffff;
  --accent-soft: #e7edf7;

  --char-digit: #0f6fa8;
  --char-symbol: #b04524;

  --ok: #17724a;
  --warn: #8f5d00;
  --bad: #a6291f;

  --shadow-1: 0 1px 2px rgba(19, 26, 36, 0.06), 0 1px 1px rgba(19, 26, 36, 0.04);
  --shadow-2: 0 8px 24px rgba(19, 26, 36, 0.09);
  --focus: 0 0 0 3px var(--accent-soft), 0 0 0 1px var(--accent);
}

[data-theme="dark"] {
  --paper: #0c1017;
  --surface: #141a23;
  --surface-2: #1b2330;
  --ink: #e7ecf3;
  --ink-2: #97a3b6;
  --ink-3: #778397;
  --line: #28323f;
  --line-strong: #3a4757;

  --accent: #6f9be8;
  --accent-hover: #87aeef;
  --accent-ink: #0c1017;
  --accent-soft: #1a2740;

  --char-digit: #7cbbec;
  --char-symbol: #e39a76;

  --ok: #4fbf87;
  --warn: #d9a441;
  --bad: #e4756a;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 10px 30px rgba(0, 0, 0, 0.45);
  --focus: 0 0 0 3px var(--accent-soft), 0 0 0 1px var(--accent);
}