/* Safe Mesh — Design System Tokens (Dark & Light Themes) */
:root {
  color-scheme: light dark;

  --brand-navy-950: #071b3d;
  --brand-navy-900: #072656;
  --brand-navy-800: #0b316d;
  --brand-navy-600: #315e99;
  --brand-orange-500: #f47721;
  --brand-orange-200: #ffd4b4;
  --brand-blue-100: #eaf2fc;
  --brand-ice-50: #f6f9fd;
  --neutral-white: #ffffff;
  --neutral-text: #17263d;
  --neutral-muted: #57697e;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;

  --radius-sm: 10px;
  --radius-control: 10px;
  --radius-card: 14px;
  --radius-panel: 18px;
  --radius-pill: 999px;

  --focus-outline: #ffb56e;
  --brand-primary-action-bg: #ffad6a;
  --brand-primary-action-text: var(--brand-navy-950);
  --accent: var(--brand-primary-action-bg);
  --accent-strong: #ffc28d;
  --accent-soft: rgba(255, 173, 106, 0.14);
  --focus-ring: rgba(255, 173, 106, 0.45);

  --surface-page: #0b1322;
  --surface-page-alt: #0f1b2e;
  --surface-card: #122036;
  --surface-card-muted: #172944;
  --surface-elevated: #182b47;
  --surface-muted: #0e1a2c;
  --surface-input: #0c1728;
  --surface-list: #112036;

  --text-primary: #f4f7fc;
  --text-secondary: #c0cfe2;
  --text-muted: #8ea3be;
  --text-danger: #ff9d9d;

  --border-subtle: rgba(148, 177, 214, 0.16);
  --border-default: #283e5c;
  --border-strong: #45638a;
  --border-accent: rgba(255, 173, 106, 0.45);

  --interactive-hover-surface: #1b3150;
  --interactive-hover-border: rgba(255, 173, 106, 0.48);
  --interactive-active-surface: rgba(255, 173, 106, 0.14);

  --success: #34d399;
  --success-soft: rgba(16, 185, 129, 0.16);
  --warning: #fbbf24;
  --warning-soft: rgba(245, 158, 11, 0.16);
  --danger: #f87171;
  --danger-soft: rgba(239, 68, 68, 0.16);
  --danger-border: rgba(248, 113, 113, 0.35);

  --emergency-bg: rgba(239, 68, 68, 0.15);
  --emergency-border: rgba(248, 113, 113, 0.32);
  --emergency-accent: #f87171;

  --shadow-soft: 0 4px 16px rgba(0, 0, 0, 0.24);
  --shadow-medium: 0 10px 26px rgba(0, 0, 0, 0.3);
  --shadow-panel: 0 14px 34px rgba(0, 0, 0, 0.36);
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

:root[data-theme="light"] {
  color-scheme: light;

  --focus-outline: #0b316d;
  --brand-primary-action-bg: #f47721;
  --brand-primary-action-text: #071b3d;
  --accent: var(--brand-orange-500);
  --accent-strong: #db6015;
  --accent-soft: #eef4fb;
  --focus-ring: rgba(11, 49, 109, 0.28);

  --surface-page: #f4f7fb;
  --surface-page-alt: #eaf1fa;
  --surface-card: #ffffff;
  --surface-card-muted: #f1f5fb;
  --surface-elevated: #ffffff;
  --surface-muted: #f1f5f9;
  --surface-input: #ffffff;
  --surface-list: #f8fafc;

  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --text-danger: #b91c1c;

  --border-subtle: #e2e8f0;
  --border-default: #cbd5e1;
  --border-strong: #94a3b8;
  --border-accent: #f47721;

  --interactive-hover-surface: #f1f5f9;
  --interactive-hover-border: #315e99;
  --interactive-active-surface: #fff3e8;

  --success: #15803d;
  --success-soft: #dcfce7;
  --warning: #b45309;
  --warning-soft: #fef3c7;
  --danger: #b91c1c;
  --danger-soft: #fee2e2;
  --danger-border: #fca5a5;

  --emergency-bg: #fef2f2;
  --emergency-border: #fecaca;
  --emergency-accent: #dc2626;

  --shadow-soft: 0 2px 10px rgba(15, 23, 42, 0.05);
  --shadow-medium: 0 8px 22px rgba(15, 23, 42, 0.08);
  --shadow-panel: 0 12px 30px rgba(15, 23, 42, 0.12);
}

body {
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-sans);
}