/* ═══════════════════════════════════════════════════════════
   AIMS Brand Design Tokens — sampled from logo assets
   logo.png (light) · logo-dark.png (dark)
   ═══════════════════════════════════════════════════════════ */

:root {
  /* Raw swatches */
  --aims-navy: #102858;
  --aims-navy-deep: #082858;
  --aims-red: #c82028;
  --aims-red-muted: #b02028;
  --aims-blue: #1058a8;
  --aims-blue-light: #2068b8;
  --aims-white: #ffffff;
  --aims-bg-dark: #001020;
  --aims-bg-dark-elevated: #081028;
  --aims-bg-dark-panel: #001828;
  --aims-logo-navy: #061933 !important;

  /* Brand aliases (used across component CSS) */
  --brand-primary: var(--aims-navy);
  --brand-secondary: var(--aims-red);
  --brand-tertiary: var(--aims-blue);
  --brand-success: #16a34a;
  --brand-warning: #d97706;
  --brand-danger: #dc2626;

  /* Surfaces — light */
  --bg-deep: #f8f9fc;
  --bg-surface: var(--aims-white);
  --bg-surface-glass: rgba(255, 255, 255, 0.88);
  --bg-surface-glass-light: rgba(255, 255, 255, 0.65);
  --bg-input: rgba(248, 249, 252, 0.95);

  /* Borders */
  --border-subtle: rgba(16, 40, 88, 0.08);
  --border-default: rgba(16, 40, 88, 0.14);
  --border-hover: var(--brand-primary-a35);
  --border-highlight: color-mix(in srgb, var(--aims-red) 35%, transparent);

  /* Typography */
  --text-primary: var(--aims-navy);
  --text-secondary: #3d5278;
  --text-tertiary: #6b7fa3;
  --text-muted: var(--text-tertiary);

  /* Typography fonts */
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-display: 'Libre Baskerville', Georgia, 'Times New Roman', serif;

  /* Brand alpha helpers */
  --brand-primary-a08: color-mix(in srgb, var(--brand-primary) 8%, transparent);
  --brand-primary-a12: color-mix(in srgb, var(--brand-primary) 12%, transparent);
  --brand-primary-a16: color-mix(in srgb, var(--brand-primary) 16%, transparent);
  --brand-primary-a22: color-mix(in srgb, var(--brand-primary) 22%, transparent);
  --brand-primary-a28: color-mix(in srgb, var(--brand-primary) 28%, transparent);
  --brand-primary-a35: color-mix(in srgb, var(--brand-primary) 35%, transparent);
  --brand-primary-a45: color-mix(in srgb, var(--brand-primary) 45%, transparent);
  --brand-secondary-a08: color-mix(in srgb, var(--brand-secondary) 8%, transparent);
  --brand-secondary-a12: color-mix(in srgb, var(--brand-secondary) 12%, transparent);
  --brand-secondary-a22: color-mix(in srgb, var(--brand-secondary) 22%, transparent);
  --brand-secondary-a35: color-mix(in srgb, var(--brand-secondary) 35%, transparent);
  --brand-tertiary-a08: color-mix(in srgb, var(--brand-tertiary) 8%, transparent);
  --brand-tertiary-a12: color-mix(in srgb, var(--brand-tertiary) 12%, transparent);
  --brand-tertiary-a22: color-mix(in srgb, var(--brand-tertiary) 22%, transparent);
  --brand-tertiary-a78: color-mix(in srgb, var(--brand-tertiary) 78%, transparent);

  /* Admin-specific aliases */
  --brand-primary-light: var(--aims-blue-light);
  --brand-primary-dark: var(--aims-navy-deep);
  --brand-gradient: linear-gradient(135deg, var(--aims-navy) 0%, var(--aims-blue) 100%);
  --brand-glow: 0 0 40px color-mix(in srgb, var(--aims-navy) 20%, transparent);
  --brand-focus-ring: color-mix(in srgb, var(--aims-red) 18%, transparent);
  --btn-primary-shadow: 0 4px 16px color-mix(in srgb, var(--aims-navy) 32%, transparent);
  --btn-primary-shadow-hover: 0 8px 24px color-mix(in srgb, var(--aims-navy) 40%, transparent);
  --btn-primary-bg: var(--aims-navy);
  --btn-primary-fg: var(--aims-white);
  --nav-bg: rgba(255, 255, 255, 0.9);

  --bg-base: var(--bg-deep);
  --bg-surface-hover: #eef1f7;
  --bg-elevated: #f3f5fa;
  --bg-overlay: rgba(8, 40, 88, 0.45);

  --success: var(--brand-success);
  --success-bg: rgba(22, 163, 74, 0.12);
  --danger: var(--brand-danger);
  --danger-bg: rgba(220, 38, 38, 0.1);
  --warning: var(--brand-warning);
  --warning-bg: rgba(217, 119, 6, 0.12);
  --info: var(--aims-blue);
  --info-bg: var(--brand-tertiary-a12);

  /* Shadows & glows */
  --shadow-float: 0 20px 40px -10px rgba(8, 40, 88, 0.18);
  --shadow-glass: 0 8px 32px 0 rgba(8, 40, 88, 0.12);
  --glow-primary: 0 0 40px -10px color-mix(in srgb, var(--aims-navy) 50%, transparent);
  --glow-secondary: 0 0 40px -10px color-mix(in srgb, var(--aims-red) 40%, transparent);
  --shadow-card: 0 4px 6px -1px rgba(8, 40, 88, 0.06), 0 12px 24px -8px rgba(8, 40, 88, 0.08);
  --shadow-card-hover: 0 12px 32px rgba(8, 40, 88, 0.1);
  --modal-shadow: 0 20px 60px rgba(8, 40, 88, 0.14);
  --toast-shadow: 0 8px 28px rgba(8, 40, 88, 0.12);

  /* Skill accents (Quizami-style speaking / writing) */
  --skill-speak: #2563eb;
  --skill-speak-soft: color-mix(in srgb, var(--skill-speak) 14%, transparent);
  --skill-speak-mid: color-mix(in srgb, var(--skill-speak) 28%, transparent);
  --skill-write: #16a34a;
  --skill-write-soft: color-mix(in srgb, var(--skill-write) 14%, transparent);
  --skill-write-mid: color-mix(in srgb, var(--skill-write) 28%, transparent);
  --shell-accent: var(--aims-navy);
  --shell-accent-soft: var(--brand-primary-a12);

  /* App shell layout */
  --sidebar-width: 240px;
  --shell-header-height: 56px;

  /* Chart dataset colors */
  --chart-speak: color-mix(in srgb, var(--skill-speak) 78%, transparent);
  --chart-write: color-mix(in srgb, var(--skill-write) 78%, transparent);
  --chart-trend: color-mix(in srgb, var(--aims-red) 92%, transparent);
  --chart-trend-fill: color-mix(in srgb, var(--aims-red) 12%, transparent);
  --chart-streak: color-mix(in srgb, var(--brand-success) 72%, transparent);

  /* Transitions */
  --spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 150ms var(--ease-out);
  --transition-base: 300ms var(--ease-out);
  --transition-spring: 500ms var(--spring);
  --transition-normal: 0.25s ease;

  /* Radius (admin) */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
}

[data-theme="dark"] {
  /* ── Dark theme palette ──
     navy bg #061933 · red #D71C24 · blue #0C6BC8 · white text */
  --dark-navy: #061933;
  --dark-red: #D71C24;
  --dark-blue: #0C6BC8;
  --dark-white: #ffffff;

  /* Override raw swatches so every direct reference adopts the palette */
  --aims-navy: var(--dark-navy);
  --aims-navy-deep: var(--dark-navy);
  --aims-blue: var(--dark-blue);
  --aims-blue-light: var(--dark-blue);
  --aims-red: var(--dark-red);
  --aims-red-muted: var(--dark-red);
  --aims-red-soft: var(--dark-red);
  --aims-bg-dark: var(--dark-navy);
  --aims-bg-dark-elevated: color-mix(in srgb, var(--dark-navy) 92%, var(--dark-white));
  --aims-bg-dark-panel: var(--dark-navy);
  --aims-logo-navy: var(--dark-navy);

  /* UI chrome = blue; accents/CTAs = red (matches logo-dark hierarchy) */
  --brand-primary: var(--dark-blue);
  --brand-secondary: var(--dark-red);
  --brand-tertiary: var(--dark-blue);

  --btn-primary-bg: linear-gradient(135deg, var(--dark-red) 0%, color-mix(in srgb, var(--dark-red) 78%, #000000) 100%);
  --btn-primary-fg: var(--dark-white);
  --nav-bg: color-mix(in srgb, var(--dark-navy) 90%, transparent);

  --bg-deep: var(--dark-navy);
  --bg-base: var(--dark-navy);
  --bg-surface: color-mix(in srgb, var(--dark-navy) 93%, var(--dark-white));
  --bg-surface-glass: color-mix(in srgb, var(--dark-navy) 82%, transparent);
  --bg-surface-glass-light: color-mix(in srgb, var(--dark-navy) 55%, transparent);
  --bg-input: color-mix(in srgb, var(--dark-navy) 88%, #000000);
  --bg-surface-hover: color-mix(in srgb, var(--dark-navy) 87%, var(--dark-white));
  --bg-elevated: color-mix(in srgb, var(--dark-navy) 90%, var(--dark-white));
  --bg-overlay: color-mix(in srgb, #020a14 72%, transparent);

  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-default: rgba(255, 255, 255, 0.12);
  --border-hover: rgba(255, 255, 255, 0.2);
  --border-highlight: color-mix(in srgb, var(--dark-red) 32%, transparent);

  --text-primary: var(--dark-white);
  --text-secondary: rgba(255, 255, 255, 0.78);
  --text-tertiary: rgba(255, 255, 255, 0.55);
  --text-muted: var(--text-tertiary);

  /* Alpha helpers — blue for primary/tertiary, red for secondary */
  --brand-primary-a08: color-mix(in srgb, var(--dark-blue) 8%, transparent);
  --brand-primary-a12: color-mix(in srgb, var(--dark-blue) 12%, transparent);
  --brand-primary-a16: color-mix(in srgb, var(--dark-blue) 16%, transparent);
  --brand-primary-a22: color-mix(in srgb, var(--dark-blue) 22%, transparent);
  --brand-primary-a28: color-mix(in srgb, var(--dark-blue) 28%, transparent);
  --brand-primary-a35: color-mix(in srgb, var(--dark-blue) 35%, transparent);
  --brand-primary-a45: color-mix(in srgb, var(--dark-blue) 45%, transparent);
  --brand-secondary-a08: color-mix(in srgb, var(--dark-red) 8%, transparent);
  --brand-secondary-a12: color-mix(in srgb, var(--dark-red) 12%, transparent);
  --brand-secondary-a22: color-mix(in srgb, var(--dark-red) 20%, transparent);
  --brand-secondary-a35: color-mix(in srgb, var(--dark-red) 30%, transparent);
  --brand-tertiary-a08: color-mix(in srgb, var(--dark-blue) 8%, transparent);
  --brand-tertiary-a12: color-mix(in srgb, var(--dark-blue) 12%, transparent);
  --brand-tertiary-a22: color-mix(in srgb, var(--dark-blue) 22%, transparent);
  --brand-tertiary-a78: color-mix(in srgb, var(--dark-blue) 78%, transparent);

  /* Skill accents map onto the palette in dark mode (no green in palette) */
  --skill-speak: var(--dark-blue);
  --skill-speak-soft: color-mix(in srgb, var(--dark-blue) 16%, transparent);
  --skill-speak-mid: color-mix(in srgb, var(--dark-blue) 30%, transparent);
  --skill-write: var(--dark-blue);
  --skill-write-soft: color-mix(in srgb, var(--dark-blue) 16%, transparent);
  --skill-write-mid: color-mix(in srgb, var(--dark-blue) 30%, transparent);
  --shell-accent: var(--dark-blue);
  --shell-accent-soft: color-mix(in srgb, var(--dark-blue) 14%, transparent);

  /* Status colors constrained to palette (positive/info = blue, negative = red) */
  --brand-success: var(--dark-blue);
  --brand-warning: var(--dark-red);
  --brand-danger: var(--dark-red);
  --success: var(--dark-blue);
  --success-bg: color-mix(in srgb, var(--dark-blue) 14%, transparent);
  --danger: var(--dark-red);
  --danger-bg: color-mix(in srgb, var(--dark-red) 14%, transparent);
  --warning: var(--dark-red);
  --warning-bg: color-mix(in srgb, var(--dark-red) 14%, transparent);
  --info: var(--dark-blue);
  --info-bg: color-mix(in srgb, var(--dark-blue) 14%, transparent);

  /* Chart series — blue / white / red so they stay distinguishable */
  --chart-speak: color-mix(in srgb, var(--dark-blue) 85%, transparent);
  --chart-write: color-mix(in srgb, var(--dark-white) 65%, transparent);
  --chart-trend: var(--dark-red);
  --chart-trend-fill: color-mix(in srgb, var(--dark-red) 14%, transparent);
  --chart-streak: color-mix(in srgb, var(--dark-red) 70%, transparent);

  --brand-gradient: linear-gradient(135deg, var(--dark-navy) 0%, var(--dark-blue) 100%);
  --brand-focus-ring: color-mix(in srgb, var(--dark-blue) 24%, transparent);
  --btn-primary-shadow: 0 4px 14px color-mix(in srgb, var(--dark-red) 18%, transparent);
  --btn-primary-shadow-hover: 0 6px 20px color-mix(in srgb, var(--dark-red) 26%, transparent);
  --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 12px 24px -8px rgba(0, 0, 0, 0.5);
  --shadow-card-hover: 0 12px 32px rgba(0, 0, 0, 0.45);
  --modal-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  --toast-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
  --glow-primary: 0 0 40px -10px color-mix(in srgb, var(--dark-blue) 35%, transparent);
  --glow-secondary: 0 0 36px -14px color-mix(in srgb, var(--dark-red) 22%, transparent);
}