/* === TOKENS — fonte de verdade de design. Nunca hardcode cor fora daqui. === */

:root {
  color-scheme: dark;

  /* Backgrounds */
  --bg-base:     #040C18;
  --bg-surface:  #081526;
  --bg-elevated: #0D1E36;
  --bg-card:     #0A1A2E;

  /* Borders */
  --border:       rgba(56, 120, 200, 0.12);
  --border-hover: rgba(56, 160, 230, 0.28);

  /* Brand */
  --primary:      #1A8FFF;
  --primary-glow: rgba(26, 143, 255, 0.22);
  --accent:       #00CFFF;
  --accent-glow:  rgba(0, 207, 255, 0.18);

  /* Semantic colors */
  --green:  #00E5A0;
  --red:    #FF4D6A;
  --amber:  #FFB547;
  --purple: #9B72FF;

  /* Text */
  --text:      #D4E8FF;
  --text-muted: #5A82B4;
  --text-dim:   #2E5580;

  /* Brand extended */
  --primary-dark:     #0E6FDB;
  --text-on-primary:  #ffffff;
  --accent-soft:      #6BB5FF;
  --purple-soft:      #B48BFF;

  /* RGB triplets — para composição com alpha: rgba(var(--primary-rgb), 0.1) */
  --primary-rgb:    26, 143, 255;
  --accent-rgb:     0, 207, 255;
  --green-rgb:      0, 229, 160;
  --red-rgb:        255, 77, 106;
  --amber-rgb:      255, 181, 71;
  --purple-rgb:     155, 114, 255;
  --bg-base-rgb:    4, 12, 24;
  --bg-surface-rgb: 8, 21, 38;
  --bg-input-rgb:   10, 30, 60;
  --bg-panel-rgb:   10, 26, 50;

  /* Tokens semânticos de UI específica */
  --bg-sidebar-dark:       #060F1E;
  --bg-status-null:        rgba(42, 70, 110, 0.4);
  --bg-status-null-hover:  rgba(42, 70, 110, 0.7);
  --border-status-null:    rgba(56, 100, 160, 0.2);
  --bg-funnel-track:       rgba(30, 60, 110, 0.5);
  --bg-overlay:            rgba(4, 12, 24, 0.8);

  /* Spacing scale */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 16px;
  --radius-2xl: 20px;

  /* Scrollbar */
  --scrollbar-thumb:       rgba(56, 120, 200, 0.25);
  --scrollbar-thumb-hover: rgba(56, 120, 200, 0.45);

  /* Table / misc alpha variants */
  --border-table-row: rgba(56, 120, 200, 0.06);
  --border-status:    rgba(56, 120, 200, 0.3);

  /* Shadows */
  --shadow-sm:  0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md:  0 4px 20px rgba(0, 0, 0, 0.4);
  --shadow-lg:  0 10px 40px rgba(0, 0, 0, 0.4);
  --shadow-xl:  0 40px 80px rgba(0, 0, 0, 0.5);
  --shadow-glow-primary: 0 4px 20px rgba(26, 143, 255, 0.35);
  --shadow-glow-primary-lg: 0 8px 30px rgba(26, 143, 255, 0.5);
  --shadow-glow-pulse: 0 0 80px rgba(26, 143, 255, 0.12);

  /* Typography */
  --font-display: 'Syne', sans-serif;
  --font-body:    'DM Sans', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;
  --font-numeric: 'Montserrat', sans-serif;

  /* Layout */
  --sidebar-width: 240px;
  --topbar-height: 60px;
  --page-padding:  2rem;

  /* Z-index scale */
  --z-sidebar: 100;
  --z-topbar:   50;
  --z-modal:   200;
  --z-toast:   999;

  /* Chart theme (lidos via getComputedStyle em charts.js — canvas não suporta CSS vars) */
  --chart-grid: rgba(56, 120, 200, 0.08);
  --chart-tick: rgba(90, 130, 180, 0.7);

  /* Collapsed sidebar */
  --sidebar-width-collapsed: 64px;

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
}

/* ══════════════════════════════════ TEMA CLARO ══════════════════════════════════ */

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

  --bg-base:     #EEF3FA;
  --bg-surface:  #FFFFFF;
  --bg-elevated: #F6F9FF;
  --bg-card:     #FFFFFF;

  --border:       rgba(26, 60, 110, 0.13);
  --border-hover: rgba(26, 80, 160, 0.30);

  --primary:      #1A7FEF;
  --primary-glow: rgba(26, 127, 239, 0.12);
  --accent:       #0099CC;
  --accent-glow:  rgba(0, 153, 204, 0.10);

  --green:  #009966;
  --red:    #D63A54;
  --amber:  #C07800;
  --purple: #6B44D6;

  --text:       #0B1F3A;
  --text-muted: #4A648C;
  --text-dim:   #7A9AC0;

  --primary-dark:    #1060C8;
  --text-on-primary: #FFFFFF;
  --accent-soft:     #3388BB;
  --purple-soft:     #6655BB;

  --primary-rgb:    26, 127, 239;
  --accent-rgb:     0, 153, 204;
  --green-rgb:      0, 153, 102;
  --red-rgb:        214, 58, 84;
  --amber-rgb:      192, 120, 0;
  --purple-rgb:     107, 68, 214;
  --bg-base-rgb:    238, 243, 250;
  --bg-surface-rgb: 255, 255, 255;
  --bg-input-rgb:   228, 237, 252;
  --bg-panel-rgb:   240, 247, 255;

  --bg-sidebar-dark:       #F4F8FF;
  --bg-status-null:        rgba(26, 60, 110, 0.07);
  --bg-status-null-hover:  rgba(26, 60, 110, 0.13);
  --border-status-null:    rgba(26, 60, 110, 0.15);
  --bg-funnel-track:       rgba(26, 60, 110, 0.10);
  --bg-overlay:            rgba(238, 243, 250, 0.85);

  --scrollbar-thumb:       rgba(26, 60, 110, 0.18);
  --scrollbar-thumb-hover: rgba(26, 60, 110, 0.32);

  --border-table-row: rgba(26, 60, 110, 0.06);
  --border-status:    rgba(26, 60, 110, 0.25);

  --shadow-sm:  0 2px 8px rgba(0, 0, 0, 0.07);
  --shadow-md:  0 4px 20px rgba(0, 0, 0, 0.09);
  --shadow-lg:  0 10px 40px rgba(0, 0, 0, 0.11);
  --shadow-xl:  0 40px 80px rgba(0, 0, 0, 0.13);
  --shadow-glow-primary:    0 4px 20px rgba(26, 127, 239, 0.18);
  --shadow-glow-primary-lg: 0 8px 30px rgba(26, 127, 239, 0.24);
  --shadow-glow-pulse:      0 0 80px rgba(26, 127, 239, 0.07);

  --chart-grid: rgba(26, 60, 110, 0.09);
  --chart-tick: rgba(74, 100, 140, 0.85);
}