/* public/assets/css/variables.css */
/* BLOOM Design System — All tokens. Never hardcode hex values in other files. */

:root {
  /* ── Brand Colours ─────────────────── */
  --bloom-orange:    #FF6B35;
  --kids-primary:    #FF6B35;
  --genz-primary:    #7C3AED;
  --casual-primary:  #059669;

  /* ── Active theme (swapped by JS per age group) */
  --active:          #FF6B35;
  --active-bg:       #FFF3EE;
  --active-border:   #FFD4C0;
  --active-dark:     #E55A28;
  --active-text:     #FFFFFF;

  /* ── Neutral Palette ───────────────── */
  --bg:              #F5F0E8;
  --bg-alt:          #EDE8DE;
  --surface:         #FFFFFF;
  --surface-raised:  #FFFEF9;
  --ink:             #1C1917;
  --ink-2:           #44403C;
  --muted:           #A8A29E;
  --border:          #E7E2D8;
  --border-focus:    #C4BDB3;

  /* ── Semantic Colours ──────────────── */
  --gold:            #F59E0B;
  --gold-bg:         #FFFBEB;
  --success:         #059669;
  --success-bg:      #ECFDF5;
  --danger:          #DC2626;
  --danger-bg:       #FEF2F2;
  --warning:         #D97706;
  --warning-bg:      #FFFBEB;
  --info:            #2563EB;
  --info-bg:         #EFF6FF;

  /* ── Gem & XP ──────────────────────── */
  --gem:             #6366F1;
  --gem-bg:          #EEF2FF;
  --xp:              #F59E0B;

  /* ── Spacing ───────────────────────── */
  --space-2xs:       2px;
  --space-xs:        4px;
  --space-sm:        8px;
  --space-md:        16px;
  --space-lg:        24px;
  --space-xl:        32px;
  --space-2xl:       48px;

  /* ── Border Radius ─────────────────── */
  --r-xs:            4px;
  --r-sm:            8px;
  --r-md:            14px;
  --r-lg:            20px;
  --r-xl:            28px;
  --r-pill:          999px;

  /* ── Typography ────────────────────── */
  --font-body:       'Nunito', sans-serif;
  --font-display:    'Playfair Display', serif;
  --font-mono:       'Courier New', monospace;

  /* ── Font Sizes ────────────────────── */
  --text-xs:         11px;
  --text-sm:         13px;
  --text-base:       15px;
  --text-md:         17px;
  --text-lg:         20px;
  --text-xl:         24px;
  --text-2xl:        30px;
  --text-3xl:        38px;

  /* ── Font Weights ──────────────────── */
  --fw-regular:      400;
  --fw-semibold:     600;
  --fw-bold:         700;
  --fw-extrabold:    800;

  /* ── Line Heights ──────────────────── */
  --lh-tight:        1.25;
  --lh-base:         1.5;
  --lh-loose:        1.75;

  /* ── Shadows ───────────────────────── */
  --shadow-xs:       0 1px 2px rgba(28,25,23,0.06);
  --shadow-sm:       0 2px 8px rgba(28,25,23,0.08);
  --shadow-md:       0 4px 16px rgba(28,25,23,0.10);
  --shadow-lg:       0 8px 32px rgba(28,25,23,0.12);
  --shadow-active:   0 4px 16px color-mix(in srgb, var(--active) 30%, transparent);

  /* ── Transitions ───────────────────── */
  --ease:            cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out:        cubic-bezier(0, 0, 0.2, 1);
  --dur-fast:        120ms;
  --dur-base:        200ms;
  --dur-slow:        350ms;

  /* ── Z-index ───────────────────────── */
  --z-base:          1;
  --z-card:          10;
  --z-sticky:        100;
  --z-nav:           200;
  --z-modal:         500;
  --z-toast:         1000;

  /* ── Layout ────────────────────────── */
  --nav-height:      64px;
  --topbar-height:   56px;
  --page-pad:        var(--space-md);
  --max-width:       480px;

  /* ── Admin (desktop) ───────────────── */
  --admin-sidebar:   220px;
  --admin-bg:        #F0F4FF;
  --admin-surface:   #FFFFFF;
  --admin-ink:       #1E293B;
  --admin-muted:     #64748B;
  --admin-border:    #E2E8F0;
  --admin-active:    #1E40AF;
  --admin-active-bg: #EFF6FF;
}