/* Shared palette; use semantic variables in components.
   Set data-theme="light" or "dark" on <html>. Without an override, follow system preference. */
:root {
  color-scheme: light;
  --brand-50: #EDF2FF;
  --brand-100: #DCE6FF;
  --brand-200: #BACDFF;
  --brand-300: #8BADFF;
  --brand-400: #5C89F0;
  --brand-500: #3467D6;
  --brand-600: #174BBF;
  --brand-700: #002FA7;
  --brand-800: #002682;
  --brand-900: #001C5C;
  --brand-950: #001239;
  --neutral-50: #F8FAFC;
  --neutral-100: #F1F5F9;
  --neutral-200: #E2E8F0;
  --neutral-300: #CBD5E1;
  --neutral-400: #94A3B8;
  --neutral-500: #64748B;
  --neutral-600: #475569;
  --neutral-700: #334155;
  --neutral-800: #1E293B;
  --neutral-900: #0F172A;
  --neutral-950: #020617;
  --white: #FFFFFF;
  --success-strong: #15803D;
  --success-subtle: #F0FDF4;
  --warning-strong: #92400E;
  --warning-subtle: #FFFBEB;
  --error-strong: #B91C1C;
  --error-subtle: #FEF2F2;
  --success-light: #86EFAC;
  --success-dark: #052E16;
  --warning-light: #FDE68A;
  --warning-dark: #451A03;
  --error-light: #FCA5A5;
  --error-dark: #450A0A;

  --background-page: var(--neutral-50);
  --background-surface: var(--white);
  --background-subtle: var(--neutral-100);
  --background-selected: var(--brand-50);
  --text-primary: var(--neutral-900);
  --text-secondary: var(--neutral-600);
  --text-muted: var(--neutral-500);
  --text-inverse: var(--white);
  --text-brand: var(--brand-700);
  --border-default: var(--neutral-200);
  --border-control: var(--neutral-500);
  --action-primary: var(--brand-700);
  --action-primary-hover: var(--brand-800);
  --action-primary-pressed: var(--brand-900);
  --action-primary-text: var(--white);
  --action-secondary: var(--white);
  --action-secondary-hover: var(--brand-50);
  --action-secondary-pressed: var(--brand-100);
  --action-secondary-text: var(--brand-700);
  --background-disabled: var(--neutral-100);
  --text-disabled: var(--neutral-400);
  --focus-ring: var(--brand-700);
  --status-success-text: var(--success-strong);
  --status-success-background: var(--success-subtle);
  --status-success-border: var(--success-strong);
  --status-warning-text: var(--warning-strong);
  --status-warning-background: var(--warning-subtle);
  --status-warning-border: var(--warning-strong);
  --status-error-text: var(--error-strong);
  --status-error-background: var(--error-subtle);
  --status-error-border: var(--error-strong);
  --status-information-text: var(--brand-700);
  --status-information-background: var(--brand-50);
  --status-information-border: var(--brand-700);
  --action-primary-border: var(--brand-700);
  --focus-gap: var(--white);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --background-page: var(--neutral-950);
  --background-surface: var(--neutral-900);
  --background-subtle: var(--neutral-800);
  --background-selected: var(--brand-900);
  --text-primary: var(--neutral-100);
  --text-secondary: var(--neutral-300);
  --text-muted: var(--neutral-400);
  --text-inverse: var(--white);
  --text-brand: var(--brand-300);
  --border-default: var(--neutral-700);
  --border-control: var(--neutral-500);
  --action-primary: var(--brand-700);
  --action-primary-hover: var(--brand-800);
  --action-primary-pressed: var(--brand-900);
  --action-primary-text: var(--white);
  --action-secondary: var(--neutral-900);
  --action-secondary-hover: var(--brand-900);
  --action-secondary-pressed: var(--brand-800);
  --action-secondary-text: var(--brand-300);
  --background-disabled: var(--neutral-800);
  --text-disabled: var(--neutral-500);
  --focus-ring: var(--brand-300);
  --status-success-text: var(--success-light);
  --status-success-background: var(--success-dark);
  --status-success-border: var(--success-light);
  --status-warning-text: var(--warning-light);
  --status-warning-background: var(--warning-dark);
  --status-warning-border: var(--warning-light);
  --status-error-text: var(--error-light);
  --status-error-background: var(--error-dark);
  --status-error-border: var(--error-light);
  --status-information-text: var(--brand-300);
  --status-information-background: var(--brand-950);
  --status-information-border: var(--brand-300);
  --action-primary-border: var(--brand-300);
  --focus-gap: var(--neutral-900);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    color-scheme: dark;
  --background-page: var(--neutral-950);
  --background-surface: var(--neutral-900);
  --background-subtle: var(--neutral-800);
  --background-selected: var(--brand-900);
  --text-primary: var(--neutral-100);
  --text-secondary: var(--neutral-300);
  --text-muted: var(--neutral-400);
  --text-inverse: var(--white);
  --text-brand: var(--brand-300);
  --border-default: var(--neutral-700);
  --border-control: var(--neutral-500);
  --action-primary: var(--brand-700);
  --action-primary-hover: var(--brand-800);
  --action-primary-pressed: var(--brand-900);
  --action-primary-text: var(--white);
  --action-secondary: var(--neutral-900);
  --action-secondary-hover: var(--brand-900);
  --action-secondary-pressed: var(--brand-800);
  --action-secondary-text: var(--brand-300);
  --background-disabled: var(--neutral-800);
  --text-disabled: var(--neutral-500);
  --focus-ring: var(--brand-300);
  --status-success-text: var(--success-light);
  --status-success-background: var(--success-dark);
  --status-success-border: var(--success-light);
  --status-warning-text: var(--warning-light);
  --status-warning-background: var(--warning-dark);
  --status-warning-border: var(--warning-light);
  --status-error-text: var(--error-light);
  --status-error-background: var(--error-dark);
  --status-error-border: var(--error-light);
  --status-information-text: var(--brand-300);
  --status-information-background: var(--brand-950);
  --status-information-border: var(--brand-300);
  --action-primary-border: var(--brand-300);
  --focus-gap: var(--neutral-900);
  }
}