@charset "UTF-8";
/**
 * Design Tokens — 002-english
 * Theme: Antigravity Literacy (Fresh, Bright, Calm, Scholastic)
 * Vibe: Premium workbook, paper tabs, reading marks, misty pastels
 */

@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,600;0,700;1,400&family=Nunito:wght@400;500;600;700;800&family=Outfit:wght@400;500;600;700;800&display=swap');

:root {
  /* ── Primary (Misty Sage / Calm Mint for focus) ── */
  --site-primary:        #2dd4bf;
  --site-primary-hover:  #14b8a6;
  --site-primary-dark:   #0f766e;
  --site-primary-light:  #f0fdfa;
  --site-primary-border: #99f6e4;
  --site-primary-glow:   rgba(45, 212, 191, 0.15);

  /* ── Accent (Warm Coral / Rose for reading marks & tabs) ── */
  --site-accent:         #fb7185;
  --site-accent-hover:   #f43f5e;
  --site-accent-dark:    #e11d48;
  --site-accent-light:   #ffe4e6;

  /* ── Secondary (Soft Creamy Yellow for highlights) ── */
  --site-secondary:      #fef08a;
  --site-secondary-dark: #ca8a04;

  /* ── Text ── */
  --site-text:           #334155;
  --site-text-muted:     #64748b;
  --site-text-light:     #94a3b8;
  --site-text-on-primary: #ffffff;

  /* ── Backgrounds ── */
  --site-background:     #f8fafc; /* Very soft cool paper */
  --site-surface:        #ffffff; /* Pure white surface */
  --site-surface-solid:  #ffffff;
  --site-surface-dark:   #f1f5f9; /* Soft gray for alternations */

  /* ── Borders ── */
  --site-border:         #e2e8f0;
  --site-border-dark:    #cbd5e1;
  --site-border-light:   #f1f5f9;

  /* ── Radius System (Gentle, friendly, workbook style) ── */
  --radius-xs:      4px;
  --radius-sm:      8px;
  --radius-md:      12px;
  --radius-lg:      16px;
  --radius-xl:      24px;
  --radius-full:    9999px;

  /* ── Aliases for detail-atom compatibility ── */
  --detail-border-radius: 20px;
  --radius-button:        16px;
  --radius-card:          24px;
  --radius-btn:           16px;
  --radius-badge:         12px;

  /* ── Typography (Editorial & Literacy focused) ── */
  --font-heading: 'Lora', serif; /* Book-like serif for primary headings */
  --font-body:    'Nunito', system-ui, sans-serif; /* Soft, readable sans for content */
  --font-number:  'Outfit', system-ui, sans-serif; /* Clean geometric for numbers and UI labels */

  /* ── Shadows (Anti-gravity tinted floating shadows) ── */
  --shadow-sm:           0 2px 8px -2px rgba(45, 212, 191, 0.08), 0 1px 2px rgba(0,0,0,0.02);
  --shadow-md:           0 8px 16px -4px rgba(45, 212, 191, 0.12), 0 4px 6px rgba(0,0,0,0.03);
  --shadow-lg:           0 16px 32px -8px rgba(45, 212, 191, 0.15), 0 8px 12px rgba(0,0,0,0.04);
  --shadow-premium:      0 24px 48px -12px rgba(45, 212, 191, 0.20), 0 12px 24px rgba(0,0,0,0.05);

  /* ── Aliases ── */
  --shadow-card:         var(--shadow-md);
  --shadow-card-hover:   var(--shadow-lg);

  /* ── Container Width Pact ── */
  --container-max:       1200px;
  
  /* ── Glassmorphism ── */
  --glass-bg:     rgba(255, 255, 255, 0.85);
  --glass-blur:   16px;
  --glass-border: rgba(226, 232, 240, 0.6);

  /* ── Transitions ── */
  --transition-base:    all 150ms cubic-bezier(0.4,0,0.2,1);
  --transition-smooth:  all 300ms cubic-bezier(0.25, 0.8, 0.25, 1); /* Slower, softer */
  --transition-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Spacing ── */
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-2xl: 4rem;
}