@charset "UTF-8";
/**
 * Design Tokens — 001-arithmetic (Easy Math / Arithmetic)
 * Theme:   Anti-gravity (Fresh, Light, Breathable)
 * Primary: #7dd3fc (Cloud Mist Blue)
 * Accent:  #a7f3d0 (Mint Green), #fef08a (Light Lemon)
 * Inspiration: Premium stationery brand, educational publisher, paper temperature
 */

:root {
  /* ── Primary Color Scale (Cloud Mist Blue) ── */
  --site-primary:        #7dd3fc;
  --site-primary-hover:  #38bdf8;
  --site-primary-dark:   #0ea5e9;
  --site-primary-light:  #f0f9ff;
  --site-primary-border: #e0f2fe;

  /* ── Accent Color Scale (Mint Green & Light Lemon) ── */
  --site-accent:         #a7f3d0;
  --site-accent-hover:   #6ee7b7;
  --site-accent-dark:    #10b981;
  --site-accent2:        #fef08a;
  --site-accent2-light:  #fef9c3;

  /* ── Text Scale (Chalk Gray & Slate) ── */
  --site-text:           #334155;
  --site-text-muted:     #94a3b8;
  --site-text-light:     #64748b;

  /* ── Surfaces (Creamy Milk White & Pure White) ── */
  --site-background:     #fafaf9;
  --site-surface:        #ffffff;

  /* ── Borders (Extremely thin and light) ── */
  --site-border:         rgba(148, 163, 184, 0.12);
  --site-border-dark:    rgba(148, 163, 184, 0.25);

  /* ── Border Radius (Cloud-like soft curves) ── */
  --detail-border-radius: 24px;
  --radius-button:        20px;
  --radius-card:          24px;
  --radius-badge:         12px;
  --radius-btn:           20px;

  /* ── Typography (Friendly, Rounded, Breathable) ── */
  --font-heading: 'Nunito', 'Quicksand', 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body:    'Nunito', 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-number:  'Outfit', 'Fredoka', 'Quicksand', monospace;

  /* ── Shadows (Anti-gravity floating colored shadows) ── */
  --shadow-card:       0 10px 30px -10px rgba(125, 211, 252, 0.15), 0 4px 12px -5px rgba(148, 163, 184, 0.08);
  --shadow-card-hover: 0 20px 40px -10px rgba(125, 211, 252, 0.3), 0 8px 16px -8px rgba(148, 163, 184, 0.12);
  --shadow-sm:         0 2px 8px -2px rgba(125, 211, 252, 0.1);
  --shadow-md:         0 8px 20px -6px rgba(125, 211, 252, 0.2);
  --shadow-lg:         0 16px 32px -8px rgba(125, 211, 252, 0.25);
  --shadow-xl:         0 24px 48px -12px rgba(125, 211, 252, 0.3);
  --shadow-btn:        0 4px 12px rgba(125, 211, 252, 0.3);
  --shadow-btn-hover:  0 8px 20px rgba(125, 211, 252, 0.4);

  /* ── Motion (Floaty & Elastic) ── */
  --transition-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-smooth: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast:          200ms;
  --dur-normal:        400ms;
  --dur-slow:          600ms;

  /* ── Spacing Scale (Airy and wide) ── */
  --space-xs:  6px;
  --space-sm:  12px;
  --space-md:  24px;
  --space-lg:  32px;
  --space-xl:  48px;
  --space-2xl: 64px;
  --space-3xl: 96px;
}