/* The page's tokens (ui-craft's system: one spacing scale, one type scale, neutrals + one accent, one
   depth system, one radius scale). Components use var(--...) only. The calculator is the device itself
   and carries its own colours (--dev-*): a black body, gold and blue shift legends, a reflective LCD. */

:root {
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;

  --t-xs: 13px; --t-sm: 14px; --t-md: 16px; --t-lg: 20px; --t-xl: 25px; --t-2xl: 31px;
  --font: ui-sans-serif, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", Consolas, monospace;
  --lh-body: 1.6; --lh-tight: 1.25;

  --n-0: #fafaf9;  --n-1: #f4f4f2;  --n-2: #e7e6e3;  --n-3: #d4d3cf;  --n-4: #a8a7a2;
  --n-6: #6b6a66;  --n-7: #4b4a47;  --n-8: #32312f;  --n-9: #1d1c1b;

  --bg: var(--n-0);
  --surface: #ffffff;
  --ink: var(--n-9);
  --ink-soft: var(--n-6);
  --ink-faint: var(--n-4);
  --line: var(--n-2);

  --accent: #2563eb;
  --accent-ink: #ffffff;
  --accent-soft: #dbeafe;
  --err-strong: #b91c1c; --err-muted: #fee2e2;

  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.05);
  --shadow-2: 0 4px 12px rgb(0 0 0 / 0.08);
  --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-pill: 999px;

  --quick: 140ms ease-out;
  --panel: 240ms ease-out;

  /* the device */
  --dev-body: #1b1b1d;
  --dev-key: #2c2c30;
  --dev-key-edge: #3a3a40;
  --dev-key-ink: #f2f2f0;
  --dev-gold: #e0b44c;
  --dev-blue: #6fb3e8;
  --dev-lit: #f2f2f0;
  --dev-lcd: #c9cdb8;
  --dev-lcd-ink: #1f2418;
  --dev-lcd-faint: #5d6450;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #141414; --surface: #1d1d1d; --ink: #ececea; --ink-soft: #a3a29e; --ink-faint: #6b6a66;
    --line: #2e2e2c; --accent: #60a5fa; --accent-ink: #0b1220; --accent-soft: #1e3a5f;
    --err-muted: #3b1414;
    --shadow-1: 0 1px 2px rgb(0 0 0 / 0.4); --shadow-2: 0 4px 12px rgb(0 0 0 / 0.5);
  }
}
:root[data-theme="dark"] {
  --bg: #141414; --surface: #1d1d1d; --ink: #ececea; --ink-soft: #a3a29e; --ink-faint: #6b6a66;
  --line: #2e2e2c; --accent: #60a5fa; --accent-ink: #0b1220; --accent-soft: #1e3a5f;
  --err-muted: #3b1414;
  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.4); --shadow-2: 0 4px 12px rgb(0 0 0 / 0.5);
}

* { box-sizing: border-box; }
body {
  font-family: var(--font);
  font-size: var(--t-md);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--bg);
  margin: 0;
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}