/* Design tokens - the single source of truth shared by the server-rendered pages and, through
   ui/src/theme.ts, by the MUI surfaces (the subscribe and preferences pages, and any island).

   The `--color-*` aliases mirror ui/src/theme.ts exactly. If you change one, change the other:
   two palettes drifting apart is how a site starts looking like two sites. `web/spa/test_chrome.py`
   fails when a colour here has no counterpart there.

   The look (docs/busybids-style-guide.md, September 2026): civic intelligence + modern B2B SaaS.
   A restrained slate neutral scale on a near-white ground, one strong BusyBids teal for the one
   primary action on a surface, and a semantic set - success, warning, danger, info, purple for a
   match - used for status and nothing else. Red is for risk, expiry and errors only. */
:root {
  /* brand ------------------------------------------------------------------------------------ */
  --bb-brand-50: #effcfa;
  --bb-brand-100: #ccfbf1;
  --bb-brand-200: #99f6e4;
  --bb-brand-500: #087f83;
  --bb-brand-600: #06666a;
  --bb-brand-700: #115e59;
  --bb-brand-900: #123c3b;
  /* Filled controls keep white labels in both themes; link tones lighten in dark mode. */
  --bb-brand-fill-hover: #06666a;
  --bb-brand-fill-active: #115e59;

  /* neutral ---------------------------------------------------------------------------------- */
  --bb-gray-0: #ffffff;
  --bb-gray-25: #fcfcfd;
  --bb-gray-50: #f8fafc;
  --bb-gray-100: #f1f5f9;
  --bb-gray-200: #e2e8f0;
  --bb-gray-300: #cbd5e1;
  --bb-gray-500: #64748b;
  --bb-gray-600: #475569;
  --bb-gray-700: #334155;
  --bb-gray-900: #0f172a;
  --bb-gray-950: #020617;

  /* semantic --------------------------------------------------------------------------------- */
  --bb-success-bg: #ecfdf3;
  --bb-success: #067647;
  --bb-success-border: #abefc6;
  --bb-warning-bg: #fffaeb;
  --bb-warning: #b54708;
  --bb-warning-border: #fedf89;
  --bb-danger-bg: #fef3f2;
  --bb-danger: #b42318;
  --bb-danger-border: #fecdca;
  --bb-info-bg: #eff8ff;
  --bb-info: #175cd3;
  --bb-info-border: #b2ddff;
  --bb-ai-bg: #f4f3ff;
  --bb-ai: #5925dc;
  --bb-ai-border: #d9d6fe;

  /* shape ------------------------------------------------------------------------------------ */
  --bb-radius-sm: 6px;
  --bb-radius-md: 8px;
  --bb-radius-lg: 12px;
  --bb-radius-xl: 16px;
  --bb-radius-full: 999px;
  --bb-shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
  --bb-shadow-popover: 0 8px 24px rgba(15, 23, 42, 0.12);
  --bb-shadow-modal: 0 24px 64px rgba(15, 23, 42, 0.18);
  --bb-focus: 0 0 0 3px rgba(8, 127, 131, 0.20);

  /* the names the templates and the MUI theme share ------------------------------------------ */
  --color-primary: #087f83;
  --color-primary-dark: #06666a;
  --color-primary-soft: #effcfa;
  --color-secondary: #0f172a;
  --color-bg: #fcfcfd;
  --color-surface: #ffffff;
  --color-text: #0f172a;
  --color-muted: #64748b;
  --color-border: #e2e8f0;
  --color-urgent: #b42318;
  --color-soon: #b54708;
  --color-ok: #067647;
  --color-info: #175cd3;
  --color-ai: #5925dc;

  --font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --radius: var(--bb-radius-lg);
  --radius-sm: var(--bb-radius-md);
  --wrap: 90rem; /* 1440px */
  --space: 1rem;
  --shadow: var(--bb-shadow-sm);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bb-brand-50: #123c3b;
  --bb-brand-100: #134e4a;
  --bb-brand-200: #06666a;
  --bb-brand-500: #087f83;
  --bb-brand-600: #99f6e4;
  --bb-brand-700: #99f6e4;
  --bb-gray-0: #172033;
  --bb-gray-25: #0b1220;
  --bb-gray-50: #111b2b;
  --bb-gray-100: #1f2b3d;
  --bb-gray-200: #334155;
  --bb-gray-300: #475569;
  --bb-gray-500: #94a3b8;
  --bb-gray-600: #cbd5e1;
  --bb-gray-700: #e2e8f0;
  --bb-gray-900: #f8fafc;
  --bb-gray-950: #ffffff;
  --bb-success-bg: #123629;
  --bb-success: #6ee7b7;
  --bb-success-border: #166b50;
  --bb-warning-bg: #3c2a10;
  --bb-warning: #fbbf24;
  --bb-warning-border: #78551b;
  --bb-danger-bg: #3c1d25;
  --bb-danger: #fda4af;
  --bb-danger-border: #7f3041;
  --bb-info-bg: #132f49;
  --bb-info: #7dd3fc;
  --bb-info-border: #275f83;
  --bb-ai-bg: #29214a;
  --bb-ai: #c4b5fd;
  --bb-ai-border: #51428c;
  --color-primary: #5eead4;
  --color-primary-dark: #99f6e4;
  --color-primary-soft: #123c3b;
  --color-secondary: #f8fafc;
  --color-bg: #0b1220;
  --color-surface: #172033;
  --color-text: #f8fafc;
  --color-muted: #94a3b8;
  --color-border: #334155;
  --color-urgent: #fda4af;
  --color-soon: #fbbf24;
  --color-ok: #6ee7b7;
  --color-info: #7dd3fc;
  --color-ai: #c4b5fd;
  --bb-shadow-sm: 0 2px 8px rgba(0, 0, 0, .2);
  --bb-shadow-popover: 0 8px 24px rgba(0, 0, 0, .4);
  --bb-shadow-modal: 0 24px 64px rgba(0, 0, 0, .55);
}