/* Global theme tokens — load before all other stylesheets. */

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

:root {
  /* Surfaces */
  --color-bg-page: #f5f5f5;
  --color-bg-main: linear-gradient(180deg, #f8f9fa 0%, #e8f5e9 50%, #c8e6c9 100%);
  --color-bg-surface: #ffffff;
  --color-bg-elevated: #ffffff;
  --color-bg-subtle: #f8f9fa;
  --color-bg-muted: #f6f7f9;
  --color-bg-hover: rgba(0, 0, 0, 0.05);
  --color-bg-active: rgba(255, 107, 53, 0.1);

  /* Text */
  --color-text-primary: #1a1a2e;
  --color-text-secondary: rgba(0, 0, 0, 0.7);
  --color-text-muted: #6c757d;
  --color-text-faint: rgba(0, 0, 0, 0.4);
  --color-text-inverse: #ffffff;

  /* Borders & shadows */
  --color-border: #dee2e6;
  --color-border-subtle: #e2e6ea;
  --color-border-light: #eef0f3;
  --color-border-strong: rgba(0, 0, 0, 0.12);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 12px 32px rgba(15, 23, 42, 0.18);
  --shadow-sidebar: 2px 0 8px rgba(0, 0, 0, 0.08);

  /* Brand */
  --color-brand: #ff6b35;
  --color-brand-secondary: #f7931e;
  --color-brand-gradient: linear-gradient(135deg, #ff6b35, #f7931e);
  --color-brand-soft: rgba(255, 107, 53, 0.12);
  --color-focus-ring: rgba(255, 107, 53, 0.2);

  /* Semantic */
  --color-danger: #c53030;
  --color-danger-bg: #fff5f5;
  --color-success-bg: #d4edda;
  --color-success-text: #155724;
  --color-warning-bg: #fff3cd;
  --color-warning-text: #856404;
  --color-error-bg: #f8d7da;
  --color-error-text: #721c24;

  /* Header chrome */
  --color-header-bg: #ffffff;
  --color-sidebar-bg: #ffffff;
  --color-sidebar-footer: rgba(0, 0, 0, 0.5);

  /* Legal footer */
  --color-legal-bg: rgba(26, 26, 46, 0.94);
  --color-legal-text: rgba(255, 255, 255, 0.88);
  --color-legal-border: rgba(255, 255, 255, 0.12);

  /* Inputs */
  --color-input-bg: #ffffff;
  --color-input-border: #dee2e6;
  --color-input-text: #1a1a2e;

  /* Xassure module */
  --xa-bg-page: var(--color-bg-page);
  --xa-bg-main: var(--color-bg-main);
  --xa-bg-surface: var(--color-bg-surface);
  --xa-bg-panel: #ffffff;
  --xa-bg-panel-gradient: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
  --xa-bg-kpi: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
  --xa-bg-input: #ffffff;
  --xa-bg-tile: #f8fafc;
  --xa-bg-bar: rgba(0, 0, 0, 0.08);
  --xa-text-primary: var(--color-text-primary);
  --xa-text-muted: var(--color-text-muted);
  --xa-text-faint: #64748b;
  --xa-text-heading: var(--color-text-primary);
  --xa-border: var(--color-border);
  --xa-border-subtle: rgba(0, 0, 0, 0.08);
  --xa-header-bg: var(--color-header-bg);
  --xa-sidebar-bg: var(--color-sidebar-bg);
  --xa-nav-hover: rgba(59, 130, 246, 0.08);
  --xa-nav-active-bg: rgba(59, 130, 246, 0.12);
  --xa-nav-active-text: #2563eb;
  --xa-nav-active-border: #3b82f6;
}

[data-theme="dark"] {
  --color-bg-page: #0f1419;
  --color-bg-main: #121820;
  --color-bg-surface: #242b3d;
  --color-bg-elevated: #1a1f2e;
  --color-bg-subtle: #1e2433;
  --color-bg-muted: #2a3144;
  --color-bg-hover: rgba(255, 255, 255, 0.06);
  --color-bg-active: rgba(255, 107, 53, 0.15);

  --color-text-primary: #e8eaed;
  --color-text-secondary: rgba(232, 234, 237, 0.85);
  --color-text-muted: #9aa0a6;
  --color-text-faint: rgba(255, 255, 255, 0.4);
  --color-text-inverse: #1a1a2e;

  --color-border: #2f3648;
  --color-border-subtle: #343b4f;
  --color-border-light: #2a3144;
  --color-border-strong: rgba(255, 255, 255, 0.12);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.45);
  --shadow-sidebar: 2px 0 12px rgba(0, 0, 0, 0.35);

  --color-brand-soft: rgba(255, 107, 53, 0.18);
  --color-focus-ring: rgba(255, 107, 53, 0.25);

  --color-danger: #f87171;
  --color-danger-bg: rgba(248, 113, 113, 0.12);
  --color-success-bg: rgba(74, 222, 128, 0.12);
  --color-success-text: #86efac;
  --color-warning-bg: rgba(251, 191, 36, 0.12);
  --color-warning-text: #fcd34d;
  --color-error-bg: rgba(248, 113, 113, 0.12);
  --color-error-text: #fca5a5;

  --color-header-bg: #1a1f2e;
  --color-sidebar-bg: #1a1f2e;
  --color-sidebar-footer: rgba(154, 160, 166, 0.6);

  --color-legal-bg: rgba(20, 24, 32, 0.96);
  --color-legal-text: rgba(232, 234, 237, 0.75);
  --color-legal-border: rgba(255, 255, 255, 0.08);

  --color-input-bg: #1e2433;
  --color-input-border: #343b4f;
  --color-input-text: #e8eaed;

  --xa-bg-page: #0b1220;
  --xa-bg-main: #0b1220;
  --xa-bg-surface: #0f172a;
  --xa-bg-panel: #111827;
  --xa-bg-panel-gradient: linear-gradient(145deg, #111827 0%, #0f172a 100%);
  --xa-bg-kpi: linear-gradient(145deg, #111827 0%, #0f172a 100%);
  --xa-bg-input: #0f172a;
  --xa-bg-tile: rgba(255, 255, 255, 0.03);
  --xa-bg-bar: rgba(255, 255, 255, 0.08);
  --xa-text-primary: #e2e8f0;
  --xa-text-muted: #94a3b8;
  --xa-text-faint: #64748b;
  --xa-text-heading: #f8fafc;
  --xa-border: rgba(255, 255, 255, 0.08);
  --xa-border-subtle: rgba(255, 255, 255, 0.05);
  --xa-header-bg: #0f172a;
  --xa-sidebar-bg: #0f172a;
  --xa-nav-hover: rgba(59, 130, 246, 0.12);
  --xa-nav-active-bg: rgba(59, 130, 246, 0.22);
  --xa-nav-active-text: #93c5fd;
  --xa-nav-active-border: #3b82f6;
}