/* Design tokens — from Thomas & Co. Operational System/DESIGN.md
   Material 3 token set. Light is the default; dark redefines values only. */
:root {
  /* surface */
  --ground:#e9fef8;
  --surface:#e9fef8;
  --surface-dim:#caded9;
  --surface-lowest:#ffffff;
  --surface-low:#e3f8f3;
  --surface-container:#def2ed;
  --surface-high:#d8ede7;
  --surface-highest:#d2e7e2;
  --surface-variant:#d2e7e2;
  --inverse-surface:#223430;
  --inverse-on-surface:#e1f5f0;

  /* content */
  --on-surface:#0d1f1c;
  --on-surface-variant:#404947;
  --outline:#707977;
  --outline-variant:#bfc8c6;

  /* brand */
  --primary:#00332e;
  --on-primary:#ffffff;
  --primary-container:#0e4b45;
  --on-primary-container:#83bab2;
  --primary-soft:#d8ede7;

  /* navigation surface — must stay dark in BOTH themes.
     M3 `primary` is a light tone in dark mode, so it cannot be used here. */
  --nav-bg:#00332e;
  --nav-fg:#ffffff;
  --nav-fg-dim:#83bab2;
  --nav-active:#0e4b45;
  --nav-hairline:rgba(255,255,255,.10);

  --secondary:#8a5100;          /* harvest amber */
  --on-secondary:#ffffff;
  --secondary-container:#fead54;
  --on-secondary-container:#724100;

  /* semantic — status only, never decorative */
  --ok:#2c6e51;
  --ok-bg:#d7ece1;
  --warn:#8a5100;
  --warn-bg:#ffdcbe;
  --critical:#ba1a1a;
  --critical-bg:#ffdad6;
  --on-critical:#ffffff;

  /* type */
  --font-display:"Archivo Narrow","Archivo","Helvetica Neue",Arial,sans-serif;
  --font-body:"Fira Sans","Helvetica Neue",Arial,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* rhythm */
  --row-office:32px;
  --row-field:56px;
  --gutter:16px;
  --margin:24px;
  --sidebar:224px;   /* reduced from 240px, snapped to the 4px grid */

  --radius:4px;
  --radius-lg:8px;
  --shadow-modal:0 4px 4px rgba(13,31,28,.10);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:#0b1614;
    --surface:#0b1614;
    --surface-dim:#0b1614;
    --surface-lowest:#060f0e;
    --surface-low:#101f1c;
    --surface-container:#142320;
    --surface-high:#1e2d2a;
    --surface-highest:#293835;
    --surface-variant:#3f4946;
    --inverse-surface:#e1f5f0;
    --inverse-on-surface:#223430;

    --on-surface:#dee4e1;
    --on-surface-variant:#bfc8c6;
    --outline:#89938f;
    --outline-variant:#3f4946;

    --primary:#9ad1c9;
    --on-primary:#00201d;
    --primary-container:#144f49;
    --on-primary-container:#b5ede5;
    --primary-soft:#16302b;

    --nav-bg:#060f0e;
    --nav-fg:#dee4e1;
    --nav-fg-dim:#89938f;
    --nav-active:#144f49;
    --nav-hairline:rgba(255,255,255,.07);

    --secondary:#ffb86f;
    --on-secondary:#2c1600;
    --secondary-container:#693c00;
    --on-secondary-container:#ffdcbe;

    --ok:#5bb68a;
    --ok-bg:#14332a;
    --warn:#ffb86f;
    --warn-bg:#3a2712;
    --critical:#ffb4ab;
    --critical-bg:#93000a;
    --on-critical:#ffffff;
  }
}

/* An explicit choice must beat the OS preference in both directions.
   Without this rule, picking "dark" on a light device does nothing —
   the dark palette would exist only inside the media query. */
:root[data-theme="dark"] {
  --ground:#0b1614;
  --surface:#0b1614;
  --surface-dim:#0b1614;
  --surface-lowest:#060f0e;
  --surface-low:#101f1c;
  --surface-container:#142320;
  --surface-high:#1e2d2a;
  --surface-highest:#293835;
  --surface-variant:#3f4946;
  --inverse-surface:#e1f5f0;
  --inverse-on-surface:#223430;

  --on-surface:#dee4e1;
  --on-surface-variant:#bfc8c6;
  --outline:#89938f;
  --outline-variant:#3f4946;

  --primary:#9ad1c9;
  --on-primary:#00201d;
  --primary-container:#144f49;
  --on-primary-container:#b5ede5;
  --primary-soft:#16302b;

  --nav-bg:#060f0e;
  --nav-fg:#dee4e1;
  --nav-fg-dim:#89938f;
  --nav-active:#144f49;
  --nav-hairline:rgba(255,255,255,.07);

  --secondary:#ffb86f;
  --on-secondary:#2c1600;
  --secondary-container:#693c00;
  --on-secondary-container:#ffdcbe;

  --ok:#5bb68a;
  --ok-bg:#14332a;
  --warn:#ffb86f;
  --warn-bg:#3a2712;
  --critical:#ffb4ab;
  --critical-bg:#93000a;
  --on-critical:#ffffff;
}