/*
 * CBAT Color System
 *
 * Core 4 colors that define the CBAT theme.
 * These defaults can be overridden by theme injection in base.html.
 *
 * USAGE: Always use var(--cbat-*) in CSS, never hardcode hex colors.
 */

:root {
  /* =========================================================================
     CORE 4 COLORS (overridden by theme selection)
     ========================================================================= */
  --cbat-primary: #256eb7;    /* Main blue - buttons, links, headers */
  --cbat-accent: #d82c1f;     /* Red - highlights, alerts, CTAs */
  --cbat-bg: #ffffff;         /* Page background */
  --cbat-text: #222222;       /* Primary text color */

  /* =========================================================================
     DERIVED COLORS (auto-calculated from core 4)
     ========================================================================= */
  --cbat-primary-light: color-mix(in srgb, var(--cbat-primary), white 85%);
  --cbat-primary-dark: color-mix(in srgb, var(--cbat-primary), black 20%);
  --cbat-accent-light: color-mix(in srgb, var(--cbat-accent), white 85%);
  --cbat-accent-dark: color-mix(in srgb, var(--cbat-accent), black 20%);
  --cbat-text-muted: color-mix(in srgb, var(--cbat-text), transparent 40%);
  --cbat-text-secondary: color-mix(in srgb, var(--cbat-text), transparent 25%);
  --cbat-border: color-mix(in srgb, var(--cbat-bg), var(--cbat-text) 20%);
  --cbat-border-light: color-mix(in srgb, var(--cbat-bg), var(--cbat-text) 12%);
  --cbat-bg-secondary: color-mix(in srgb, var(--cbat-bg), var(--cbat-text) 3%);
  --cbat-bg-hover: color-mix(in srgb, var(--cbat-bg), var(--cbat-text) 6%);

  /* =========================================================================
     SEMANTIC COLORS (fixed across all themes)
     ========================================================================= */
  --success: #27ae60;
  --success-bg: rgba(39, 174, 96, 0.1);
  --error: #c0392b;
  --error-bg: rgba(192, 57, 43, 0.1);
  --warning: #f39c12;
  --warning-bg: rgba(243, 156, 18, 0.1);
  --info: #3498db;
  --info-bg: rgba(52, 152, 219, 0.1);

  /* =========================================================================
     LEGACY ALIASES (for backward compatibility with base_test.css)
     These map old variable names to new ones during migration.
     ========================================================================= */
  --main-color: var(--cbat-primary);
  --accent-color: var(--cbat-accent);
  --body-font-color: var(--cbat-text);
  --borderColor: var(--cbat-border);
  --successColor: var(--success);
  --successBGColor: var(--success-bg);
  --errorColor: var(--error);
  --errorBGColor: var(--error-bg);
  --infoColor: var(--info);
  --infoBGColor: var(--info-bg);
}

/* ===========================================================================
   DARK MODE
   Triggered by: html[data-theme="dark"]
   Toggle via JS: document.documentElement.dataset.theme = 'dark'
   =========================================================================== */

html[data-theme="dark"] {
  --cbat-primary: #90d0ff;
  --cbat-accent: #ff6b6b;
  --cbat-bg: #1a1a1a;
  --cbat-text: #f0f0f0;

  /* Semantic colors adjusted for dark mode */
  --success: #51cf66;
  --success-bg: rgba(81, 207, 102, 0.15);
  --error: #ff6b6b;
  --error-bg: rgba(255, 107, 107, 0.15);
  --warning: #ffd43b;
  --warning-bg: rgba(255, 212, 59, 0.15);
  --info: #74c0fc;
  --info-bg: rgba(116, 192, 252, 0.15);
}

html[data-theme="dark"] body {
  background-color: var(--cbat-bg);
  color: var(--cbat-text);
}