/**
 * BSERI — Site-wide color tokens
 * Edit canonical --color-* values here for site-wide brand changes.
 * Legacy names (--brand, --primary-600, --clr-primary, etc.) alias below.
 *
 * Brand rebrand — May 2026:
 *   Hero colors  : #1C4484 (deep blue), #C3CBE4 (periwinkle), #E50434 (red)
 *   Strategy     : Unified palette across public, admin, quiz, about, blog.
 *                  Red is reserved for danger/error states only.
 *                  Periwinkle = muted surfaces + tertiary brand color.
 */

:root {
  /* ── Public brand (deep blue) ─────────────────────────── */
  --color-primary: #1c4484;
  --color-primary-hover: #163666;
  --color-primary-dark: #112a4f;
  --color-primary-darker: #0a1933;
  --color-primary-light: #5363d6;
  --color-primary-lighter: #6fb6e4;
  --color-primary-pale: #9aaad3;
  --color-primary-50: #eef2fa;
  --color-primary-100: #c3cbe4;

  --color-accent: #5363d6;
  --color-accent-indigo: #5363d6;
  --color-accent-indigo-dark: #1c4484;
  /* Amber — alerts/icons only; do not use for .btn-accent / primary CTAs */
  --color-highlight: #f59e0b;
  --color-highlight-light: #fcd34d;

  /* CTA buttons: light periwinkle surface + navy label */
  --color-cta-bg: var(--color-tertiary);
  --color-cta-bg-hover: var(--color-tertiary-dark);
  --color-cta-text: var(--color-primary-dark);
  --color-cta-text-hover: var(--color-primary-darker);
  --color-cta-border: rgba(28, 68, 132, 0.22);
  --color-brand-purple: #6b21a8;

  /* ── Tertiary (periwinkle — new hero color) ───────────── */
  --color-tertiary: #c3cbe4;
  --color-tertiary-light: #eef1f8;
  --color-tertiary-dark: #9aaad3;

  /* ── Text ────────────────────────────────────────────── */
  --color-text: #0f172a;
  --color-text-heading: #1e293b;
  --color-text-muted: #64748b;
  --color-text-subtle: #94a3b8;
  --color-text-inverse: #ffffff;

  /* ── Surfaces & borders ──────────────────────────────── */
  --color-bg: #ffffff;
  --color-bg-muted: #eef1f8;
  --color-bg-subtle: #e3e8f3;
  --color-bg-hero: #112a4f;
  --color-surface: #eef1f8;
  --color-surface-2: #c3cbe4;
  --color-surface-3: #9aaad3;
  --color-border: #c3cbe4;
  --color-border-dark: #9aaad3;

  /* Gray scale (homepage + webinars + tailwind-aligned) */
  --gray-50: #fafafa;
  --gray-100: #f1f5f9;
  --gray-200: #e5e7eb;
  --gray-300: #cbd5e1;
  --gray-400: #9ca3af;
  --gray-500: #64748b;
  --gray-600: #4b5563;
  --gray-700: #475569;
  --gray-800: #1f2937;
  --gray-900: #1e293b;

  /* Webinars extended grays (alias where same role) */
  --gray-wb-50: #f9fafb;
  --gray-wb-100: #f3f4f6;
  --gray-wb-900: #111827;

  /* ── Feedback ────────────────────────────────────────── */
  --color-success: #10b981;
  --color-success-dark: #059669;
  --color-warning: #f59e0b;
  --color-warning-dark: #d97706;
  --color-danger: #e50434;
  --color-danger-alt: #c9032d;
  --color-info: #5363d6;

  /* ── Admin portal (UNIFIED — was green, now brand blue) ── */
  --color-admin-primary: #1c4484;
  --color-admin-primary-light: #5363d6;
  --color-admin-primary-dark: #112a4f;
  --color-admin-accent: #6fb6e4;
  --color-admin-bg-body: #f7faff;
  --color-admin-bg-card: #ffffff;
  --color-admin-bg-muted: #eef1f8;
  --color-admin-text: #1c4484;
  --color-admin-text-secondary: #64748b;
  --color-admin-border: #c3cbe4;

  /* ── Quiz apps (UNIFIED — was corporate blue, now brand blue) ── */
  --color-quiz-primary: #1c4484;
  --color-quiz-primary-hover: #163666;
  --color-quiz-bg: #eef1f8;
  --color-quiz-card: #ffffff;
  --color-quiz-text: #0f172a;
  --color-quiz-text-muted: #64748b;
  --color-quiz-border: #c3cbe4;

  /* ── About / editorial (navy = brand blue, periwinkle accent) ── */
  --color-about-navy: #1c4484;
  --color-about-navy-deep: #112a4f;
  --color-about-accent: var(--color-tertiary);
  --color-about-accent-strong: var(--color-tertiary-dark);
  --color-about-accent-light: var(--color-tertiary-light);
  /* Legacy names → periwinkle (do not use gold on new About UI) */
  --color-about-gold: var(--color-about-accent);
  --color-about-gold-light: var(--color-about-accent-light);
  --color-about-text: #0f172a;
  --color-about-muted: #64748b;
  --color-about-surface: #eef1f8;
  --color-about-border: #c3cbe4;

  /* ── Blog (UNIFIED) ──────────────────────────────────── */
  --color-blog-header: #1c4484;

  /* ── Cookie consent ──────────────────────────────────── */
  --color-cookie-banner: rgba(55, 65, 81, 0.95);

  /* ── Gradients (refreshed to new palette) ────────────── */
  --gradient-brand: linear-gradient(
    135deg,
    var(--color-primary) 0%,
    var(--color-primary-light) 100%
  );
  --gradient-hero-webinar: linear-gradient(
    135deg,
    var(--color-primary-dark) 0%,
    var(--color-primary) 25%,
    var(--color-primary-light) 50%,
    var(--color-primary-lighter) 75%,
    var(--color-tertiary) 100%
  );
  --gradient-feature-light: linear-gradient(135deg, #eef1f8 0%, #c3cbe4 100%);
  --gradient-card: linear-gradient(
    145deg,
    var(--color-bg) 0%,
    var(--color-bg-muted) 100%
  );
  --gradient-about-hero: linear-gradient(
    160deg,
    var(--color-about-navy) 0%,
    var(--color-about-navy-deep) 100%
  );

  /* ── Navigation (aliases) ────────────────────────────── */
  --nav-utility-bg: var(--color-bg-muted);
  --nav-utility-border: var(--color-border);
  --nav-primary-bg: var(--color-bg);
  --nav-primary-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  --nav-primary-shadow-sticky: 0 4px 12px rgba(0, 0, 0, 0.12);
  --nav-text-utility: var(--color-text-muted);
  --nav-text-primary: var(--color-text-heading);
  --nav-text-hover: var(--color-primary);
  --nav-text-active: var(--color-primary);
  --nav-text-muted: var(--color-text-subtle);

  /* ── Legacy: theme.css ───────────────────────────────── */
  --brand: var(--color-primary);
  --brand-2: var(--color-accent);
  --ink: var(--color-text);
  --muted: var(--color-text-muted);
  --bg: var(--color-bg);
  --surface: var(--color-bg-muted);
  --highlight: var(--color-highlight);
  --success: var(--color-success);
  --danger: var(--color-danger);
  --warning: var(--color-warning);
  --brand-light: var(--color-primary-light);
  --brand-lighter: var(--color-primary-100);
  --surface-2: var(--color-surface-2);
  --surface-3: var(--color-surface-3);
  --border: var(--color-border);
  --border-dark: var(--color-border-dark);

  /* ── Legacy: index.php homepage ──────────────────────── */
  --primary-600: var(--color-primary);
  --primary-500: var(--color-primary-light);
  --primary-400: var(--color-primary-lighter);
  --secondary-500: var(--color-highlight);
  --secondary-400: var(--color-highlight-light);
  --bg-primary: var(--color-bg);
  --bg-secondary: var(--color-bg-muted);
  --bg-hero: var(--color-bg-hero);

  /* ── Legacy: webinars.css scale ──────────────────────── */
  --primary-700: var(--color-primary);
  --primary-800: var(--color-primary-dark);
  --primary-900: var(--color-primary-darker);
  --success-500: var(--color-success);
  --success-600: var(--color-success-dark);
  --warning-500: var(--color-warning);
  --warning-600: var(--color-warning-dark);
  --hero-gradient: var(--gradient-hero-webinar);
  --feature-gradient: var(--gradient-feature-light);
  --card-gradient: var(--gradient-card);

  /* ── Legacy: admin.css ───────────────────────────────── */
  --clr-primary: var(--color-admin-primary);
  --clr-primary-light: var(--color-admin-primary-light);
  --clr-primary-dark: var(--color-admin-primary-dark);
  --clr-accent: var(--color-admin-accent);
  --clr-bg-body: var(--color-admin-bg-body);
  --clr-bg-card: var(--color-admin-bg-card);
  --clr-bg-muted: var(--color-admin-bg-muted);
  --clr-text-primary: var(--color-admin-text);
  --clr-text-secondary: var(--color-admin-text-secondary);
  --clr-border: var(--color-admin-border);

  /* ── Legacy: quiz style.css ──────────────────────────── */
  --primary-color: var(--color-quiz-primary);
  --primary-hover: var(--color-quiz-primary-hover);
  --bg-color: var(--color-quiz-bg);
  --card-bg: var(--color-quiz-card);
  --text-main: var(--color-quiz-text);
  --text-muted: var(--color-quiz-text-muted);
  --border-color: var(--color-quiz-border);

  /* ── Legacy: about-premium.css ───────────────────────── */
  --about-navy: var(--color-about-navy);
  --about-navy-deep: var(--color-about-navy-deep);
  --about-gold: var(--color-about-gold);
  --about-gold-light: var(--color-about-gold-light);
  --about-accent: var(--color-about-accent);
  --about-text: var(--color-about-text);
  --about-muted: var(--color-about-muted);
  --about-surface: var(--color-about-surface);
  --about-border: var(--color-about-border);
}