@charset "UTF-8";
/**
 * Design Tokens — 024-k5english
 * Brand: Sunshine yellow + warm sky blue — K-5 English, literacy joy
 * Primary:  #eab308  HSL(45°, 93%, 47%) — sunshine yellow
 * Accent:   #38bdf8  HSL(199°, 92%, 60%) — sky blue
 * Hue distance: 154° — split-complementary — vibrant, warm, child-friendly
 */

:root {
  /* ── Primary (sunshine yellow) ── */
  --site-primary:         #eab308;
  --site-primary-hover:   #ca8a04;
  --site-primary-dark:    #713f12;
  --site-primary-light:   #fefce8;
  --site-primary-lighter: #fefdf5;
  --site-primary-border:  #fef08a;
  --site-primary-active:  #a16207;

  /* ── Accent (sky blue) ── */
  --site-accent:          #38bdf8;
  --site-accent-hover:    #0ea5e9;
  --site-accent-dark:     #0369a1;
  --site-accent-light:    #f0f9ff;

  /* ── Secondary ── */
  --site-secondary:       #ca8a04;
  --site-secondary-hover: #a16207;
  --site-secondary-light: #fefce8;

  /* ── Semantic (never change per brand) ── */
  --site-success:  #22c55e;
  --site-warning:  #f59e0b;
  --site-error:    #ef4444;
  --site-info:     #3b82f6;

  /* ── Surfaces ── */
  --site-background:           #ffffff;
  --site-surface:              #fefce8;
  --site-surface-raised:       #ffffff;
  --site-background-alt:       #fefce8;
  --site-background-secondary: #fef9c3;

  /* ── Text ── */
  --site-text:           #1c1400;
  --site-text-primary:   #1c1400;
  --site-text-secondary: #78716c;
  --site-text-tertiary:  #57534e;
  --site-text-muted:     #78716c;
  --site-text-inverse:   #ffffff;

  /* ── Border ── */
  --site-border:        #fef9c3;
  --site-border-light:  #fefce8;
  --site-border-medium: #fef08a;

  /* ── Radius — Round personality (kid-friendly: 18–20px cards, pill buttons) ── */
  --radius-sm:       8px;
  --radius-md:       14px;
  --radius-lg:       18px;
  --radius-xl:       24px;
  --radius-full:     9999px;
  --radius-button:   9999px;
  --radius-card:     18px;
  --detail-border-radius: 18px;

  /* ── Typography ── */
  --font-heading: 'Nunito', 'Quicksand', system-ui, sans-serif;
  --font-body:    system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'Source Code Pro', monospace;

  /* ── Spacing (Relaxed 1.25× — generous, airy, child-friendly) ── */
  --spacing-2xs: 2px;
  --spacing-xs:  4px;
  --spacing-sm:  8px;
  --spacing-md:  16px;
  --spacing-lg:  24px;
  --spacing-xl:  40px;
  --spacing-2xl: 64px;
  --spacing-3xl: 80px;
  --spacing-4xl: 120px;

  /* ── Shadows (tinted warm-yellow for depth on white) ── */
  --shadow-sm:  0 1px 3px rgba(234, 179, 8, 0.08);
  --shadow-md:  0 4px 12px rgba(234, 179, 8, 0.12);
  --shadow-lg:  0 10px 24px rgba(234, 179, 8, 0.16);
  --shadow-xl:  0 20px 40px rgba(234, 179, 8, 0.20);

  /* ── Animation ── */
  --dur-fast:    150ms;
  --dur-normal:  250ms;
  --dur-slow:    400ms;
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --ease-out:    cubic-bezier(0, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* ── Premium tokens ── */
  --shadow-card-hover:   0 12px 28px rgba(234, 179, 8, 0.18), 0 4px 10px rgba(0, 0, 0, 0.04);
  --shadow-btn-brand:    0 4px 14px rgba(234, 179, 8, 0.35);
  --shadow-blue-hover:   0 8px 20px rgba(56, 189, 248, 0.22);
  --gradient-hero-body:  linear-gradient(160deg, #fefce8 0%, #ffffff 40%, #f0f9ff 100%);
  --gradient-hero-blob:  radial-gradient(ellipse 700px 450px at 75% 15%, rgba(234, 179, 8, 0.09) 0%, transparent 65%);
  --gradient-stat-badge: linear-gradient(135deg, #eab308 0%, #fde047 100%);
  --accent-line-width:   3rem;
  --accent-line-height:  3px;
}

/* ═══ Dark Mode ═══ */
@media (prefers-color-scheme: dark) {
  :root {
    --site-primary:         #fde047;
    --site-primary-hover:   #facc15;
    --site-primary-dark:    #eab308;
    --site-primary-light:   #1c1700;
    --site-primary-lighter: #111100;
    --site-primary-border:  #3d3300;
    --site-primary-active:  #fde047;

    --site-accent:          #7dd3fc;
    --site-accent-hover:    #38bdf8;
    --site-accent-dark:     #0ea5e9;
    --site-accent-light:    #082040;

    --site-secondary:       #fde047;
    --site-secondary-hover: #facc15;
    --site-secondary-light: #1c1700;

    --site-background:           #100e00;
    --site-surface:              #1a1800;
    --site-surface-raised:       #242200;
    --site-background-alt:       #1c1700;
    --site-background-secondary: #2a2400;

    --site-text:           #fef9c3;
    --site-text-primary:   #fef9c3;
    --site-text-secondary: #fde047;
    --site-text-tertiary:  #fef08a;
    --site-text-muted:     #9ca3af;
    --site-text-inverse:   #100e00;

    --site-border:        #3d3300;
    --site-border-light:  #2a2400;
    --site-border-medium: #554800;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.55);
    --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.65);
    --shadow-card-hover:   0 12px 28px rgba(0, 0, 0, 0.55), 0 4px 10px rgba(253, 224, 71, 0.10);
    --shadow-btn-brand:    0 4px 14px rgba(253, 224, 71, 0.30);
    --shadow-blue-hover:   0 8px 20px rgba(125, 211, 252, 0.18);
    --gradient-hero-body:  linear-gradient(160deg, #1a1800 0%, #100e00 50%, #040d18 100%);
    --gradient-hero-blob:  radial-gradient(ellipse 700px 450px at 75% 15%, rgba(253, 224, 71, 0.07) 0%, transparent 65%);
    --gradient-stat-badge: linear-gradient(135deg, #92400e 0%, #eab308 100%);
  }
}