/*!
 * Barbaariye Design System — Tokens
 * Phase 1 of the UI/UX modernization roadmap.
 *
 * WHAT THIS FILE DOES
 * - Defines the brand's design tokens (color, type, spacing, radius, shadow, motion) as CSS custom properties.
 * - Re-maps those tokens onto Bootstrap 5.3's own CSS variables (--bs-*), so every existing Bootstrap
 *   component already used across the app (buttons, cards, alerts, badges, forms, tables, modals,
 *   breadcrumbs, navs) picks up the new look automatically — with ZERO changes to HTML/PHP markup.
 * - Supports light + dark mode via Bootstrap 5.3's native `data-bs-theme` attribute (future-ready; not
 *   yet switched on anywhere in the app).
 *
 * LOAD ORDER: include this file AFTER bootstrap.min.css and BEFORE components.css and any page's own
 * inline <style> block, so page-specific overrides can still win where needed.
 *
 * SAFE TO ADD/REMOVE: this file only sets CSS variables and a couple of @font-face-free font-family
 * stacks. It contains no selectors that target specific pages, so it cannot break page-specific logic.
 */

/* ---------------------------------------------------------------------- */
/* 1. Brand tokens                                                        */
/* ---------------------------------------------------------------------- */
:root {
  /* Brand palette — named, not just "primary/secondary" */
  --bz-horizon:        #3538CD; /* deep indigo — trust, primary actions   */
  --bz-horizon-600:     #2C2FB0;
  --bz-horizon-100:     #E7E7FA;
  --bz-marigold:       #FFA531; /* warm amber — energy, secondary accent  */
  --bz-marigold-600:    #E8901F;
  --bz-papaya:         #FF6F59; /* warm coral — child-facing CTAs         */
  --bz-sprout:         #12B886; /* teal green — growth, success           */
  --bz-sprout-600:      #0FA377;
  --bz-sky:            #2FB4E8; /* sky blue — info, live sessions         */
  --bz-berry:          #E64980; /* berry pink — playful accents           */
  --bz-sun:            #FFD43B; /* sunshine yellow — highlights, badges   */

  --bz-cloud:          #F6F7FB; /* app background, light mode             */
  --bz-cloud-100:       #FFFFFF;
  --bz-mist:           #E7E9F3; /* borders, dividers, light mode          */
  --bz-ink:            #1B1D3A; /* headings / body text, light mode       */
  --bz-ink-soft:       #565A7A; /* secondary text, light mode             */

  --bz-ink-900:        #14152B; /* app background, dark mode              */
  --bz-ink-800:        #1F2140; /* surfaces/cards, dark mode              */
  --bz-ink-700:        #2A2C52; /* borders, dark mode                     */

  --bz-danger:         #F0483E;
  --bz-warning:        #FFA531;
  --bz-info:           #2FB4E8;
  --bz-success:        #12B886;

  /* Typography */
  --bz-font-display: "Baloo 2", "Segoe UI Rounded", "Nunito", system-ui, sans-serif; /* headings — warm, rounded, kid-friendly but not childish */
  --bz-font-body:    "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;         /* body copy — clean, highly legible at small sizes */
  --bz-font-mono:    "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace;  /* IDs, timestamps, codes in admin tables */

  --bz-fs-xs:   0.75rem;
  --bz-fs-sm:   0.875rem;
  --bz-fs-base: 1rem;
  --bz-fs-lg:   1.125rem;
  --bz-fs-xl:   1.375rem;
  --bz-fs-2xl:  1.75rem;
  --bz-fs-3xl:  2.25rem;

  /* Spacing scale (8pt base, with a 4px half-step) */
  --bz-space-1: 0.25rem;
  --bz-space-2: 0.5rem;
  --bz-space-3: 0.75rem;
  --bz-space-4: 1rem;
  --bz-space-5: 1.5rem;
  --bz-space-6: 2rem;
  --bz-space-7: 3rem;
  --bz-space-8: 4rem;

  /* Radius scale — soft, rounded, premium (not childish blob-everywhere) */
  --bz-radius-sm:   0.5rem;
  --bz-radius-md:   0.875rem;
  --bz-radius-lg:   1.25rem;
  --bz-radius-xl:   1.75rem;
  --bz-radius-pill: 999px;

  /* Elevation */
  --bz-shadow-sm: 0 2px 8px rgba(27, 29, 58, 0.06);
  --bz-shadow-md: 0 8px 24px rgba(27, 29, 58, 0.10);
  --bz-shadow-lg: 0 16px 40px rgba(27, 29, 58, 0.14);
  --bz-shadow-glow-horizon: 0 6px 20px rgba(53, 56, 205, 0.30);
  --bz-shadow-glow-papaya:  0 6px 20px rgba(255, 111, 89, 0.35);

  /* Motion */
  --bz-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --bz-duration-fast: 120ms;
  --bz-duration-base: 220ms;
  --bz-duration-slow: 420ms;

  /* Signature motif: the "growth arc" gradient used as a thin top accent on
     cards/section headers throughout the app (see components.css .bz-arc) */
  --bz-gradient-arc: linear-gradient(90deg, var(--bz-horizon) 0%, var(--bz-sky) 35%, var(--bz-sprout) 65%, var(--bz-marigold) 100%);
  --bz-gradient-cta: linear-gradient(135deg, var(--bz-horizon) 0%, #5B5EE8 100%);
  --bz-gradient-child: linear-gradient(160deg, #FFF4D6 0%, #FFE0EC 50%, #DCF3FF 100%);
}

@media (prefers-reduced-motion: reduce) {
  :root { --bz-duration-fast: 0ms; --bz-duration-base: 0ms; --bz-duration-slow: 0ms; }
}

/* ---------------------------------------------------------------------- */
/* 2. Map tokens onto Bootstrap 5.3 CSS variables — LIGHT MODE (default)  */
/* ---------------------------------------------------------------------- */
:root,
[data-bs-theme="light"] {
  --bs-primary:       var(--bz-horizon);
  --bs-primary-rgb:   53, 56, 205;
  --bs-secondary:     var(--bz-ink-soft);
  --bs-secondary-rgb: 86, 90, 122;
  --bs-success:       var(--bz-sprout);
  --bs-success-rgb:   18, 184, 134;
  --bs-info:          var(--bz-sky);
  --bs-info-rgb:      47, 180, 232;
  --bs-warning:       var(--bz-marigold);
  --bs-warning-rgb:   255, 165, 49;
  --bs-danger:        var(--bz-danger);
  --bs-danger-rgb:    240, 72, 62;
  --bs-light:         var(--bz-cloud);
  --bs-dark:          var(--bz-ink);

  --bs-body-bg:      var(--bz-cloud);
  --bs-body-color:   var(--bz-ink);
  --bs-secondary-color: var(--bz-ink-soft);
  --bs-tertiary-bg:  #FFFFFF;
  --bs-border-color: var(--bz-mist);
  --bs-emphasis-color: var(--bz-ink);

  --bs-body-font-family: var(--bz-font-body);
  --bs-link-color:       var(--bz-horizon);
  --bs-link-hover-color: var(--bz-horizon-600);
  --bs-link-color-rgb:   53, 56, 205;

  --bs-border-radius:       var(--bz-radius-md);
  --bs-border-radius-sm:    var(--bz-radius-sm);
  --bs-border-radius-lg:    var(--bz-radius-lg);
  --bs-border-radius-xl:    var(--bz-radius-xl);
  --bs-border-radius-2xl:   var(--bz-radius-xl);
  --bs-border-radius-pill:  var(--bz-radius-pill);

  --bs-box-shadow:     var(--bz-shadow-md);
  --bs-box-shadow-sm:  var(--bz-shadow-sm);
  --bs-box-shadow-lg:  var(--bz-shadow-lg);

  color-scheme: light;
}

/* ---------------------------------------------------------------------- */
/* 3. Map tokens onto Bootstrap 5.3 CSS variables — DARK MODE (opt-in)    */
/*    Activate anywhere by setting <html data-bs-theme="dark">.          */
/*    Not enabled by default; wired up for a future settings toggle.      */
/* ---------------------------------------------------------------------- */
[data-bs-theme="dark"] {
  --bs-primary:      #7A7DF0;
  --bs-primary-rgb:  122, 125, 240;
  --bs-success:      #35D6A5;
  --bs-info:         #5CCBF2;
  --bs-warning:      var(--bz-marigold);
  --bs-danger:       #FF6B62;

  --bs-body-bg:      var(--bz-ink-900);
  --bs-body-color:   #E9EAF6;
  --bs-secondary-color: #A7ABD1;
  --bs-tertiary-bg:  var(--bz-ink-800);
  --bs-border-color: var(--bz-ink-700);
  --bs-emphasis-color: #FFFFFF;

  --bs-link-color:       #9EA1F5;
  --bs-link-hover-color: #C1C3F9;
  --bs-link-color-rgb:   158, 161, 245;

  color-scheme: dark;
}

/* ---------------------------------------------------------------------- */
/* 4. Base typography — headings pick up the display face automatically   */
/* ---------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--bz-font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
}

code, kbd, pre, samp, .font-monospace {
  font-family: var(--bz-font-mono);
}