/* ── TrackAI Design System Tokens ─────────────────────────────────────
   Shared CSS variables for index.html, command-center.html, admin.html.
   Import via <link rel="stylesheet" href="/variables.css"> BEFORE any
   page-specific <style> blocks so pages can override if needed.

   Theme: .night class on <html> = dark mode (default for app).
   Landing page uses light default; app uses dark default.
   Both read localStorage('trackai-theme') to sync.                    */

/* ═══ DARK THEME (default for app) ═══ */
:root {
  /* Colors — core palette */
  --color-bg:          #07090a;
  --color-surface:     #0c0f0a;
  --color-surface-2:   #111810;
  --color-border:      #2a3d2a;
  --color-accent:      #D46A2B;
  --color-accent-hover:#E07830;
  --color-text:        #e8edd4;
  --color-muted:       #7d9060;
  --color-btn-text:    #07090a;

  /* Colors — semantic */
  --color-error:       #ef5350;
  --color-error-dim:   rgba(239,83,80,0.12);
  --color-error-bdr:   rgba(239,83,80,0.3);
  --color-success:     #6B9B5A;
  --color-success-dim: rgba(107,155,90,0.12);
  --color-success-bdr: rgba(107,155,90,0.3);
  --color-warn:        #ffa726;
  --color-warn-dim:    rgba(255,167,38,0.12);
  --color-warn-bdr:    rgba(255,167,38,0.3);
  --color-info:        #42a5f5;
  --color-info-dim:    rgba(66,165,245,0.12);
  --color-info-bdr:    rgba(66,165,245,0.3);

  /* Typography */
  --font-heading:      'Barlow Condensed', sans-serif;
  --font-mono:         'IBM Plex Mono', monospace;
  --font-body:         'Inter', sans-serif;

  /* Glass / alpha layers (swap in light theme) */
  --glass-03:          rgba(255,255,255,0.03);
  --glass-05:          rgba(255,255,255,0.05);
  --glass-06:          rgba(255,255,255,0.06);
  --glass-08:          rgba(255,255,255,0.08);
  --glass-10:          rgba(255,255,255,0.10);
  --glass-15:          rgba(255,255,255,0.15);
  --accent-05:         rgba(212,106,43,0.05);
  --accent-08:         rgba(212,106,43,0.08);
  --accent-10:         rgba(212,106,43,0.10);
  --accent-12:         rgba(212,106,43,0.12);
  --accent-15:         rgba(212,106,43,0.15);
  --accent-20:         rgba(212,106,43,0.20);
  --accent-25:         rgba(212,106,43,0.25);
  --accent-30:         rgba(212,106,43,0.30);
  --accent-40:         rgba(212,106,43,0.40);
  --accent-45:         rgba(212,106,43,0.45);
  --accent-50:         rgba(212,106,43,0.50);

  /* Layout */
  --header-height:     56px;
}

/* ═══ LIGHT THEME ═══ */
:root.light {
  --color-bg:          #FAFAF8;
  --color-surface:     #F3F1ED;
  --color-surface-2:   #EBE8E3;
  --color-border:      #D6D1C8;
  --color-accent:      #D46A2B;
  --color-accent-hover:#E07830;
  --color-text:        #1A1714;
  --color-muted:       #8A7F72;
  --color-btn-text:    #FAFAF8;

  --color-error-dim:   rgba(239,83,80,0.08);
  --color-error-bdr:   rgba(239,83,80,0.2);
  --color-success-dim: rgba(107,155,90,0.08);
  --color-success-bdr: rgba(107,155,90,0.2);
  --color-warn-dim:    rgba(255,167,38,0.08);
  --color-warn-bdr:    rgba(255,167,38,0.2);
  --color-info-dim:    rgba(66,165,245,0.08);
  --color-info-bdr:    rgba(66,165,245,0.2);

  /* Glass layers — inverted for light backgrounds */
  --glass-03:          rgba(0,0,0,0.03);
  --glass-05:          rgba(0,0,0,0.05);
  --glass-06:          rgba(0,0,0,0.06);
  --glass-08:          rgba(0,0,0,0.08);
  --glass-10:          rgba(0,0,0,0.10);
  --glass-15:          rgba(0,0,0,0.15);
  --accent-05:         rgba(212,106,43,0.04);
  --accent-08:         rgba(212,106,43,0.06);
  --accent-10:         rgba(212,106,43,0.08);
  --accent-12:         rgba(212,106,43,0.10);
  --accent-15:         rgba(212,106,43,0.12);
  --accent-20:         rgba(212,106,43,0.16);
  --accent-25:         rgba(212,106,43,0.20);
  --accent-30:         rgba(212,106,43,0.25);
  --accent-40:         rgba(212,106,43,0.35);
  --accent-45:         rgba(212,106,43,0.40);
  --accent-50:         rgba(212,106,43,0.45);
}
