/* joeOS design tokens.
   Colours sampled from the live joe.ie masthead, 11 September 2026:
   yellow #F7C74E is 68% of the header, ink #172428 22%, magenta #AD467E 3.7%.
   Neutrals are mixed toward the ink, which is a desaturated teal, not a true black. */

:root {
  --joe-yellow:  #F7C74E;
  --joe-ink:     #172428;
  --joe-magenta: #AD467E;

  --n-0:   #FFFFFF;
  --n-50:  #F6F7F7;
  --n-100: #EDEFEF;
  --n-200: #DCE0E0;
  --n-300: #B9C0C1;
  --n-400: #8A9496;
  --n-500: #5F6B6D;
  --n-600: #475355;
  --n-700: #2C3A3D;
  --n-800: #1F2C2F;
  --n-900: #172428;
  --n-950: #0E1719;

  --bg:      #FFFFFF;
  --sidebar: #FAFAFA;
  --surface: #FFFFFF;
  --raised:  #F4F5F5;
  --line:    #E7E9E9;
  --line-2:  #D3D7D7;
  --text:    #171F22;
  --text-2:  #5B6669;
  --text-3:  #868F91;
  --accent:  var(--joe-magenta);
  --link:    #1F5F8B;
  --focus:   #171F22;
  --focus-ring: rgba(23,31,34,.1);

  --ok:   #1E7D57;  --ok-bg:   #E4F2EB;
  --warn: #C25E1A;  --warn-bg: #FAEBDF;
  --bad:  #C4362F;  --bad-bg:  #F9E6E4;
  --info: #2C6E8F;  --info-bg: #E4EEF4;

  /* Anton is reserved for the JOE wordmark. Everything else is Plex. */
  --display: "Anton", "Haettenschweiler", "Arial Narrow", sans-serif;
  --ui: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --r: 6px;
  --shadow: 0 1px 2px rgba(23,36,40,.05), 0 6px 18px -10px rgba(23,36,40,.18);
  --shadow-lg: 0 18px 44px -16px rgba(23,36,40,.4);
  --gap: 16px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0F1416; --sidebar: #121819; --surface: #161D1F; --raised: #1C2426;
    --line: #262F31; --line-2: #394244;
    --text: #E9ECEC; --text-2: #A3ACAE; --text-3: #7B8486;
    --accent: #E086B6;
    --ok: #4FBF8F;  --ok-bg:   #122A22;
    --warn: #E8913F; --warn-bg: #2E2015;
    --bad: #EE6F62;  --bad-bg:  #2E1A19;
    --info: #6BB2D4; --info-bg: #13252E;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -14px rgba(0,0,0,.6);
  }
}

[data-theme="dark"] {
  --bg: #0F1416; --sidebar: #121819; --surface: #161D1F; --raised: #1C2426;
  --line: #262F31; --line-2: #394244;
  --text: #E9ECEC; --text-2: #A3ACAE; --text-3: #7B8486;
  --accent: #E086B6;
  --ok: #4FBF8F;  --ok-bg:   #122A22;
  --warn: #E8913F; --warn-bg: #2E2015;
  --bad: #EE6F62;  --bad-bg:  #2E1A19;
  --info: #6BB2D4; --info-bg: #13252E;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -14px rgba(0,0,0,.6);
}