/**
 * SwanFlow - Theme Variables
 * Shared across all pages (dashboard, knowledge, admin)
 */

/* ============================================================================
   LIGHT THEME (Default)
   Clean, professional light mode with ocean blues
   ============================================================================ */
:root,
[data-theme="light"] {
  /* Primary colors */
  --primary: #2D8B94;
  --primary-rgb: 45, 139, 148;
  --primary-dark: #236A72;
  --primary-light: #4A9DA5;
  --accent: #E89B5F;
  --accent-dark: #D68847;

  /* Status colors */
  --success: #10b981;
  --warning: #E89B5F;
  --danger: #CC5544;

  /* Traffic status colors */
  --status-flowing: #10b981;
  --status-flowing-rgb: 16, 185, 129;
  --status-moderate: #f59e0b;
  --status-moderate-rgb: 245, 158, 11;
  --status-heavy: #ef4444;
  --status-heavy-rgb: 239, 68, 68;
  --status-gridlock: #991b1b;
  --status-gridlock-rgb: 153, 27, 27;

  /* Background colors */
  --bg: #F5F2EB;
  --bg-secondary: #E8DCC4;
  --card-bg: #FDFBF7;
  --section-alt-bg: rgba(45, 139, 148, 0.025);

  /* Text colors */
  --text: #2C3E50;
  --text-muted: #6B7280;
  --text-inverse: #FFFFFF;

  /* Border and shadow */
  --border: #D4C4A8;
  --shadow: rgba(45, 139, 148, 0.15);

  /* Chart colors */
  --chart-primary: #2D8B94;
  --chart-fill: rgba(45, 139, 148, 0.1);

  /* Font families */
  --font-display: 'Syne', 'Outfit', sans-serif;
  --font-body: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

/* ============================================================================
   DARK THEME
   Modern dark mode with subtle ocean blues
   ============================================================================ */
[data-theme="dark"] {
  /* Primary colors */
  --primary: #4A9DA5;
  --primary-rgb: 74, 157, 165;
  --primary-dark: #5CB3BB;
  --primary-light: #6EC9D1;
  --accent: #E89B5F;
  --accent-dark: #F4B17A;

  /* Status colors */
  --success: #34D399;
  --warning: #E89B5F;
  --danger: #EF4444;

  /* Traffic status colors (brighter for dark mode) */
  --status-flowing: #34d399;
  --status-flowing-rgb: 52, 211, 153;
  --status-moderate: #fbbf24;
  --status-moderate-rgb: 251, 191, 36;
  --status-heavy: #f87171;
  --status-heavy-rgb: 248, 113, 113;
  --status-gridlock: #dc2626;
  --status-gridlock-rgb: 220, 38, 38;

  /* Background colors */
  --bg: #0F1419;
  --bg-secondary: #1A2027;
  --card-bg: #1E2A35;
  --section-alt-bg: rgba(74, 157, 165, 0.04);

  /* Text colors */
  --text: #E8F0F2;
  --text-muted: #9CA3AF;
  --text-inverse: #0F1419;

  /* Border and shadow */
  --border: #2D4A5C;
  --shadow: rgba(74, 157, 165, 0.2);

  /* Chart colors */
  --chart-primary: #4A9DA5;
  --chart-fill: rgba(74, 157, 165, 0.15);
}