/* Design tokens. The whole look is controlled from this one file.
   Colour rule: hue means status. Interactive elements are ink, never coloured. */

:root {
  /* Surfaces */
  --bg: #f7f7f5;
  --surface: #ffffff;
  --surface-2: #fafaf9;
  --surface-3: #f1f1ee;
  --border: #e3e3df;
  --border-strong: #cfcfc9;

  /* Text */
  --text: #16181d;
  --text-muted: #63666e;
  --text-faint: #8b8e96;

  /* Interactive: ink, not colour */
  --accent: #16181d;
  --accent-fg: #ffffff;
  --accent-hover: #2a2d34;
  --focus: #2f6fed;

  /* Status: the only place hue is allowed */
  --ok-fg: #1f6b45;
  --ok-bg: #e6f2ea;
  --info-fg: #1d5495;
  --info-bg: #e5edf8;
  --warn-fg: #8a5a0b;
  --warn-bg: #fbf0dc;
  --mute-fg: #63666e;
  --mute-bg: #ededea;
  --danger-fg: #a02b21;
  --danger-bg: #fae8e6;

  /* Shape */
  --radius: 6px;
  --radius-sm: 4px;

  /* Spacing scale */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s7: 32px;
  --s8: 40px;
  --s9: 48px;

  /* Elevation: overlays only. Everything else uses hairlines. */
  --shadow-overlay: 0 8px 24px rgba(20, 22, 26, 0.12);
  --shadow-drawer: 0 0 40px rgba(20, 22, 26, 0.18);

  /* Structure */
  --row-h: 44px;
  --sidebar-w: 240px;
  --sidebar-w-collapsed: 60px;
  --topbar-h: 56px;

  /* Type */
  --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fs-micro: 11px;
  --fs-meta: 12px;
  --fs-cell: 13px;
  --fs-body: 14px;
  --fs-title: 15px;
  --fs-page: 20px;
  --fs-stat: 28px;

  /* Motion: short, ease-out, entrances only */
  --t-fast: 110ms;
  --t-base: 160ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="dark"] {
  --bg: #131417;
  --surface: #1a1c20;
  --surface-2: #1f2126;
  --surface-3: #26282e;
  --border: #2d2f35;
  --border-strong: #3c3f46;

  --text: #e8e8e6;
  --text-muted: #9c9fa6;
  --text-faint: #72757c;

  --accent: #e8e8e6;
  --accent-fg: #131417;
  --accent-hover: #ffffff;
  --focus: #5b90f5;

  --ok-fg: #64c090;
  --ok-bg: #16301f;
  --info-fg: #7db0ee;
  --info-bg: #15263c;
  --warn-fg: #d9a54b;
  --warn-bg: #35280d;
  --mute-fg: #9c9fa6;
  --mute-bg: #26282e;
  --danger-fg: #e58a80;
  --danger-bg: #3a1b18;

  --shadow-overlay: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-drawer: 0 0 40px rgba(0, 0, 0, 0.6);
}