/* Derived from sauron (ui/src/tokens.css) so the dashboards share one
   visual identity. The Tailwind-only @theme aliases are omitted because
   this Worker uses the semantic CSS variables directly. */
:root {
  /* Font Families */
  --font-display: "Satoshi", "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Satoshi", "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, monospace;

  /* Primitive Colors */

  --base-white: #ffffff;
  --base-black: #000000;

  --gray-50: #f2f2f2;
  --gray-100: #e5e5e5;
  --gray-200: #cccccc;
  --gray-300: #b3b3b3;
  --gray-400: #808080;
  --gray-500: #666666;
  --gray-600: #404040;
  --gray-700: #333333;
  --gray-800: #262626;
  --gray-900: #1a1a1a;
  --gray-950: #0d0d0d;

  --blue-100: #eff6ff;
  --blue-200: #dbeafe;
  --blue-300: #bedbff;
  --blue-400: #8ec5ff;
  --blue-500: #51a2ff;
  --blue-600: #2b7fff;
  --blue-700: #155dfc;
  --blue-800: #1447e6;
  --blue-900: #1c398e;
  --blue-1000: #162456;

  --red-100: #fff5f5;
  --red-200: #ffe2e0;
  --red-300: #ffc7c2;
  --red-400: #ffafa3;
  --red-500: #fb2c36;
  --red-600: #e7000b;
  --red-700: #bd2915;
  --red-800: #9f1f18;
  --red-900: #771208;
  --red-1000: #660e0b;

  --green-100: #effeef;
  --green-200: #d7f6d6;
  --green-300: #bef2c9;
  --green-400: #9adea8;
  --green-500: #50ab64;
  --green-600: #439758;
  --green-700: #377e49;
  --green-800: #2c663d;
  --green-900: #1c4529;
  --green-1000: #193925;

  --yellow-100: #fffbea;
  --yellow-200: #fff1bc;
  --yellow-300: #ffe799;
  --yellow-400: #ffd74c;
  --yellow-500: #ffcb00;
  --yellow-600: #ffbf00;
  --yellow-700: #ffc82a;
  --yellow-800: #f7a200;
  --yellow-900: #ea9000;
  --yellow-1000: #c55c00;

  --orange-100: #fff4e4;
  --orange-200: #ffdfbe;
  --orange-300: #ffcf94;
  --orange-400: #ffc15f;
  --orange-500: #ffa100;
  --orange-600: #ff9800;
  --orange-700: #ff9200;
  --orange-800: #ec7600;
  --orange-900: #db6a00;
  --orange-1000: #944300;

  --overlay-50: rgba(0, 0, 0, 0.5);
  --overlay-70: rgba(0, 0, 0, 0.7);

  --radius-none: 0px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* Elevations */
  --elevation-100:
    0px 1px 3px rgba(0, 0, 0, 0.15), 0px 0px 0.5px rgba(0, 0, 0, 0.3);
  --elevation-200:
    0px 1px 3px rgba(0, 0, 0, 0.1), 0px 3px 8px rgba(0, 0, 0, 0.1),
    inset 0px 0px 0.5px rgba(0, 0, 0, 0.18);
  --elevation-300:
    0px 0px 0.5px rgba(0, 0, 0, 0.12), 0px 1px 3px rgba(0, 0, 0, 0.1),
    0px 5px 12px rgba(0, 0, 0, 0.13);
  --elevation-400:
    0px 0px 0.5px rgba(0, 0, 0, 0.12), 0px 1px 3px rgba(0, 0, 0, 0.15),
    0px 10px 16px rgba(0, 0, 0, 0.12);
  --elevation-500:
    0px 0px 0.5px rgba(0, 0, 0, 0.12), 0px 10px 16px rgba(0, 0, 0, 0.12),
    0px 2px 5px rgba(0, 0, 0, 0.15);

  /* Durations */
  --duration-fast: 80ms;
  --duration-normal: 120ms;
  --duration-slow: 180ms;

  /* Semantic Colors — Light */
  --bg-app: #fafafa;
  --bg-primary: #ffffff;
  --bg-secondary: oklch(96.19% 0 0);
  --bg-tertiary: oklch(93.89% 0 0);
  --bg-inverse: #000000;
  --bg-overlay: rgba(0, 0, 0, 0.5);
  --bg-informative: oklch(97.32% 0.0141 252.29);
  --bg-warning: oklch(97.48% 0.0331 85.79);
  --bg-success: oklch(96.92% 0.0382 147.2);
  --bg-danger: oklch(62.5% 0.198 25.73);
  --bg-danger-hover: oklch(58% 0.214 27.99);
  --bg-danger-pressed: oklch(54% 0.214 27.99);
  --bg-danger-secondary: oklch(57.75% 0.214 27.99);
  --bg-danger-tertiary: oklch(96.5% 0.0221 13.48);
  --text-primary: oklch(20.44% 0 0);
  --text-secondary: oklch(51.02% 0 0);
  --text-tertiary: oklch(58.95% 0 0);
  --text-disabled: oklch(73.26% 0 0);
  --text-inverse: #ffffff;
  --text-on-color: #ffffff;
  --text-success: oklch(60.2% 0.1618 147.84);
  --text-warning: oklch(52.79% 0.1496 54.65);
  --text-informative: oklch(53.18% 0.2399 256.99);
  --text-link: oklch(47.13% 0.1983 258.78);
  --text-danger: oklch(57.75% 0.214 27.99);
  --text-danger-ondanger: #ffffff;
  --border-subtle: oklch(93.89% 0 0);
  --border-default: oklch(91.3% 0 0);
  --border-strong: oklch(83.73% 0 0);
  --border-selected: oklch(20.44% 0 0);
  --border-disabled: oklch(93.89% 0 0);
  --border-assistive: oklch(53.23% 0.2073 259.16);
  --border-informative: oklch(91.58% 0.0481 248.01);
  --border-warning: oklch(91.02% 0.1322 88.25);
  --border-success: oklch(91.49% 0.1039 146.35);
  --border-danger: oklch(91.51% 0.045 21.34);
  --border-base: #000000;
  --icon-primary: var(--text-primary);
  --icon-secondary: var(--text-secondary);
  --icon-tertiary: var(--text-tertiary);
  --icon-disabled: var(--text-disabled);
  --icon-inverse: #ffffff;
  --icon-informative: var(--text-informative);
  --icon-success: var(--text-success);
  --icon-danger: var(--text-danger);
  --icon-warning: var(--text-warning);
  --action-primary: #000000;
  --action-primary-hover: oklch(30% 0 0);
  --action-primary-active: oklch(73.26% 0 0);
  --action-primary-disabled: oklch(83.73% 0 0);
  --action-primary-pressed: oklch(26% 0 0);
  --action-secondary: oklch(93.89% 0 0);
  --action-secondary-hover: oklch(91% 0 0);
  --action-secondary-disabled: oklch(96.19% 0 0);
  --action-secondary-pressed: oklch(88% 0 0);
  --action-danger: var(--bg-danger);
  --action-danger-hover: var(--bg-danger-hover);
}

.dark {
  /* Semantic Colors — Dark */
  --bg-app: #191919;
  --bg-primary: #1a1a1a;
  --bg-secondary: #222222;
  --bg-tertiary: #313131;
  --bg-inverse: #ffffff;
  --bg-overlay: rgba(0, 0, 0, 0.7);
  --bg-informative: #162456;
  --bg-warning: #252018;
  --bg-success: #193925;
  --bg-danger: #e5484d;
  --bg-danger-hover: #dc2626;
  --bg-danger-pressed: #b91c1c;
  --bg-danger-secondary: #ef4444;
  --bg-danger-tertiary: #271819;
  --text-primary: #ffffff;
  --text-secondary: #bebebe;
  --text-tertiary: #6e6e6e;
  --text-disabled: #525252;
  --text-inverse: #000000;
  --text-on-color: #ffffff;
  --text-success: #30a46c;
  --text-warning: #e2a336;
  --text-informative: #60a5fa;
  --text-link: #60a5fa;
  --text-danger: #e5484d;
  --text-danger-ondanger: #ffffff;
  --border-subtle: #232323;
  --border-default: #232323;
  --border-strong: #313131;
  --border-selected: oklch(94.66% 0 0);
  --border-disabled: #232323;
  --border-assistive: #60a5fa;
  --border-informative: #1e3a8a;
  --border-warning: #8f6424;
  --border-success: #1f5c3a;
  --border-danger: #5f2427;
  --border-base: #ffffff;
  --icon-primary: var(--text-primary);
  --icon-secondary: var(--text-secondary);
  --icon-tertiary: var(--text-tertiary);
  --icon-disabled: var(--text-disabled);
  --icon-inverse: #000000;
  --icon-informative: var(--text-informative);
  --icon-success: var(--text-success);
  --icon-danger: var(--text-danger);
  --icon-warning: var(--text-warning);
  --action-primary: #ffffff;
  --action-primary-hover: #f0f0f0;
  --action-primary-active: #404040;
  --action-primary-disabled: #333333;
  --action-primary-pressed: #cccccc;
  --action-secondary: #222222;
  --action-secondary-hover: #313131;
  --action-secondary-disabled: #1a1a1a;
  --action-secondary-pressed: #262626;
  --action-danger: var(--bg-danger);
  --action-danger-hover: var(--bg-danger-hover);

  /* Elevations — Dark */
  --elevation-100:
    0px 1px 3px rgba(255, 255, 255, 0.04),
    inset 0px 0.5px 0px rgba(255, 255, 255, 0.1);
  --elevation-200:
    0px 1px 3px rgba(255, 255, 255, 0.08),
    inset 0px 0.5px 0px rgba(255, 255, 255, 0.08);
  --elevation-300:
    0px 2px 8px rgba(255, 255, 255, 0.12),
    inset 0px 0.5px 0px rgba(255, 255, 255, 0.08);
  --elevation-400:
    0px 2px 8px rgba(255, 255, 255, 0.15),
    inset 0px 0.5px 0px rgba(255, 255, 255, 0.08);
  --elevation-500:
    0px 2px 8px rgba(255, 255, 255, 0.12),
    0px 5px 12px rgba(255, 255, 255, 0.12);
}