/*
 * 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.
 *
 * WCAG AA CONTRAST TARGETS:
 *   Normal text:    4.5:1 minimum
 *   Large text/UI:  3.0:1 minimum
 * Ratios computed against --cbat-bg (light: #ffffff, dark: #1a1a1a).
 */

:root {
  /* =========================================================================
     CORE 4 COLORS (overridden by theme selection)
     ========================================================================= */
  --cbat-primary: #256eb7; /* ci-exempt - CSS variable definition */   /* Main blue — 5.27:1 on #fff ✅ AA */
  --cbat-accent: #d82c1f; /* ci-exempt - CSS variable definition */     /* Red — 4.88:1 on #fff ✅ AA */
  --cbat-bg: #ffffff; /* ci-exempt - CSS variable definition */         /* Page background */
  --cbat-text: #222222; /* ci-exempt - CSS variable definition */       /* Primary text — 15.9:1 on #fff ✅ AAA */

  /* =========================================================================
     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 30%); /* ~5.9:1 on #fff ✅ AA (was 40% = 4.3:1 ❌) */
  --cbat-text-secondary: color-mix(in srgb, var(--cbat-text), transparent 25%); /* ~7.0:1 on #fff ✅ AA */
  --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%);
  --cbat-text-on-primary: #ffffff; /* ci-exempt - CSS variable definition */  /* Always white - for text on colored backgrounds */

  /* =========================================================================
     SEMANTIC COLORS (fixed across all themes)
     NOTE: --success, --warning, --info do not meet 4.5:1 on white.
     Use them for icons, badges, and background tints only — never for body text.
     --error (5.44:1) is the only semantic color safe for text on white.
     ========================================================================= */
  --success: #27ae60; /* ci-exempt - CSS variable definition */         /* 2.87:1 on #fff — icons/badges only */
  --success-bg: rgba(39, 174, 96, 0.1); /* ci-exempt - CSS variable definition */
  --error: #c0392b; /* ci-exempt - CSS variable definition */           /* 5.44:1 on #fff ✅ AA */
  --error-bg: rgba(192, 57, 43, 0.1); /* ci-exempt - CSS variable definition */
  --warning: #f39c12; /* ci-exempt - CSS variable definition */         /* 2.19:1 on #fff — icons/badges only */
  --warning-bg: rgba(243, 156, 18, 0.1); /* ci-exempt - CSS variable definition */
  --info: #3498db; /* ci-exempt - CSS variable definition */            /* 3.15:1 on #fff — icons/badges only */
  --info-bg: rgba(52, 152, 219, 0.1); /* ci-exempt - CSS variable definition */
  --link-visited: #7c3aed; /* ci-exempt - CSS variable definition */    /* Purple — 5.70:1 on #fff ✅ AA */
  --success-dark: color-mix(in srgb, var(--success), black 25%);
  --error-dark: color-mix(in srgb, var(--error), black 20%);
  --warning-dark: color-mix(in srgb, var(--warning), black 35%);
  --purple: #6f42c1; /* ci-exempt - CSS variable definition */
  --purple-bg: rgba(111, 66, 193, 0.1); /* ci-exempt - CSS variable definition */
  --orange: #fd7e14; /* ci-exempt - CSS variable definition */

  /* =========================================================================
     TYPOGRAPHY
     Approved fonts: Montserrat (body) + Rubik (headings) only.
     Use these variables everywhere — never hardcode font-family or font-size.
     ========================================================================= */
  --cbat-font-body: "Montserrat", sans-serif;      /* Approved body font */
  --cbat-font-heading: "Rubik", sans-serif;        /* Approved heading font */
  --cbat-font-mono: monospace;                     /* Code / technical text */

  /* Font sizes — always use these, never hardcode px values */
  --cbat-font-size-base: 1rem;       /* 16px — body text */
  --cbat-font-size-sm: 0.875rem;     /* 14px — secondary text, labels */
  --cbat-font-size-xs: 0.75rem;      /* 12px — absolute minimum, use sparingly */
  --cbat-font-size-lg: 1.125rem;     /* 18px — emphasized text */
  --cbat-font-size-xl: 1.25rem;      /* 20px — subheadings */

  /* =========================================================================
     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);
  --body-font-family: var(--cbat-font-body);
  --header-font-family: var(--cbat-font-heading);
  --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; /* ci-exempt - CSS variable definition */   /* 10.5:1 on #1a1a1a ✅ AAA */
  --cbat-accent: #ff6b6b; /* ci-exempt - CSS variable definition */     /* 6.27:1 on #1a1a1a ✅ AA */
  --cbat-bg: #1a1a1a; /* ci-exempt - CSS variable definition */
  --cbat-text: #f0f0f0; /* ci-exempt - CSS variable definition */       /* 14.8:1 on #1a1a1a ✅ AAA */
  --cbat-text-on-primary: #ffffff; /* ci-exempt - CSS variable definition */  /* Stays white in dark mode for colored backgrounds */
  --cbat-primary-light: color-mix(in srgb, var(--cbat-primary), black 60%);  /* Dark blue tint in dark mode */

  /* Semantic colors adjusted for dark mode — all pass 3:1 on #1a1a1a */
  --success: #51cf66; /* ci-exempt - CSS variable definition */
  --success-bg: rgba(81, 207, 102, 0.15); /* ci-exempt - CSS variable definition */
  --error: #ff6b6b; /* ci-exempt - CSS variable definition */
  --error-bg: rgba(255, 107, 107, 0.15); /* ci-exempt - CSS variable definition */
  --warning: #ffd43b; /* ci-exempt - CSS variable definition */
  --warning-bg: rgba(255, 212, 59, 0.15); /* ci-exempt - CSS variable definition */
  --info: #74c0fc; /* ci-exempt - CSS variable definition */
  --info-bg: rgba(116, 192, 252, 0.15); /* ci-exempt - CSS variable definition */
  --link-visited: #c084fc; /* ci-exempt - CSS variable definition */    /* Light purple — 6.59:1 on #1a1a1a ✅ AA */
}

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