/*
  AI OS mockup tokens.
  Design read: Operate surface (personal command board) for one user (Hendra),
  control-room flight-strip style. Dials ENERGY 2 / RHYTHM 2 / MOTION 1.

  Palette: warm paper / charcoal neutrals, one amber accent, plus two status
  colours (ok, fault) that only ever mean running / broken.
  - Amber = "this is where it is now / this waits on you". Never decoration.
  - Neutrals are warm so the board reads like printed strips on a desk, not a SaaS grid.

  Type (Industrial): Inter for strip labels and running text, JetBrains Mono for every number, time,
  hash and %. Both are self-hosted from /fonts (css/fonts.css); the CSP allows no other font source.
*/

:root {
  color-scheme: light;
  --paper: oklch(0.972 0.009 85);
  --surface: oklch(0.993 0.004 85);
  --sunk: oklch(0.945 0.011 85);
  --ink: oklch(0.25 0.014 60);
  --ink-2: oklch(0.43 0.014 60);
  --ink-3: oklch(0.50 0.012 65);
  --rule: oklch(0.875 0.012 80);
  --rule-strong: oklch(0.70 0.014 70);
  --amber: oklch(0.80 0.15 72);
  --amber-soft: oklch(0.93 0.06 80);
  --amber-ink: oklch(0.47 0.12 58);
  --on-amber: oklch(0.22 0.02 60);
  --ok: oklch(0.48 0.11 150);
  --ok-soft: oklch(0.93 0.04 150);
  --fault: oklch(0.50 0.17 28);
  --fault-soft: oklch(0.94 0.04 28);
  --focus: oklch(0.45 0.16 255);
  /* Orb core: the lit centre of the voice orb, same hue as amber so the orb stays one colour. */
  --orb-core: oklch(0.93 0.08 88);
  --shadow-float: 0 14px 36px oklch(0.2 0.01 60 / 0.22);

  --font-strip: "Inter", system-ui, sans-serif;
  --font-text: "Inter", system-ui, sans-serif;
  --font-num: "JetBrains Mono", ui-monospace, monospace;

  --space-2xs: 2px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 48px;

  --radius-cell: 2px;
  --radius-control: 6px;
  --radius-panel: 10px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-mid: 200ms;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: oklch(0.195 0.008 60);
    --surface: oklch(0.235 0.009 60);
    --sunk: oklch(0.17 0.008 60);
    --ink: oklch(0.935 0.01 85);
    --ink-2: oklch(0.78 0.012 80);
    --ink-3: oklch(0.66 0.012 75);
    --rule: oklch(0.33 0.01 60);
    --rule-strong: oklch(0.48 0.012 60);
    --amber: oklch(0.80 0.15 72);
    --amber-soft: oklch(0.32 0.06 65);
    --amber-ink: oklch(0.84 0.13 75);
    --on-amber: oklch(0.2 0.02 60);
    --ok: oklch(0.78 0.13 150);
    --ok-soft: oklch(0.30 0.05 150);
    --fault: oklch(0.74 0.15 28);
    --fault-soft: oklch(0.31 0.06 28);
    --focus: oklch(0.78 0.12 255);
    --orb-core: oklch(0.92 0.09 88);
    --shadow-float: 0 14px 36px oklch(0 0 0 / 0.5);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: oklch(0.195 0.008 60);
  --surface: oklch(0.235 0.009 60);
  --sunk: oklch(0.17 0.008 60);
  --ink: oklch(0.935 0.01 85);
  --ink-2: oklch(0.78 0.012 80);
  --ink-3: oklch(0.66 0.012 75);
  --rule: oklch(0.33 0.01 60);
  --rule-strong: oklch(0.48 0.012 60);
  --amber: oklch(0.80 0.15 72);
  --amber-soft: oklch(0.32 0.06 65);
  --amber-ink: oklch(0.84 0.13 75);
  --on-amber: oklch(0.2 0.02 60);
  --ok: oklch(0.78 0.13 150);
  --ok-soft: oklch(0.30 0.05 150);
  --fault: oklch(0.74 0.15 28);
  --fault-soft: oklch(0.31 0.06 28);
  --focus: oklch(0.78 0.12 255);
  --orb-core: oklch(0.92 0.09 88);
  --shadow-float: 0 14px 36px oklch(0 0 0 / 0.5);
}