@charset "UTF-8";
/**
 * Design Tokens — Site 017: Free Mathdoku
 * Primary: #06b6d4  (vivid cyan — math cage energy)
 * Accent:  #fb7185  (coral rose — clue highlights)
 * Rebrand: 2026-03-12
 */

:root {
  /* ── Primary (Vivid Cyan) ── */
  --site-primary:        #06b6d4;
  --site-primary-hover:  #0891b2;
  --site-primary-dark:   #164e63;
  --site-primary-light:  #ecfeff;
  --site-primary-border: #a5f3fc;

  /* ── Accent (Coral Rose) ── */
  --site-accent:         #fb7185;
  --site-accent-hover:   #f43f5e;
  --site-accent-dark:    #be123c;
  --site-accent-light:   #fff1f2;
  --site-accent-border:  #fecdd3;

  /* ── Text ── */
  --site-text:           #0c1a1f;
  --site-text-primary:   #0c1a1f;
  --site-text-secondary: #1e3a45;
  --site-text-muted:     #64748b;
  --site-text-light:     #475569;
  --site-text-inverse:   #ffffff;

  /* ── Background ── */
  --site-background:     #ffffff;
  --site-surface:        #f0fdfe;
  --site-bg-alt:         #ecfeff;

  /* ── Border ── */
  --site-border:         #cffafe;
  --site-border-medium:  #a5f3fc;
  --site-border-dark:    #67e8f9;

  /* ── Radius — Round personality (playful math) ── */
  --detail-border-radius: 16px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* ── Shadows (cyan-tinted) ── */
  --shadow-sm:  0 1px 3px rgba(6,182,212,0.08);
  --shadow-md:  0 4px 8px rgba(6,182,212,0.12);
  --shadow-lg:  0 10px 20px rgba(6,182,212,0.15);

  /* ── Typography ── */
  --font-heading: 'Poppins', 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body:    system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'Consolas', 'Monaco', monospace;

  /* ── Transitions ── */
  --dur-fast:   150ms;
  --dur-normal: 250ms;
  --dur-slow:   400ms;

  /* ── Premium Tokens ── */
  --shadow-card-hover:  0 12px 28px rgba(6,182,212,0.18), 0 4px 10px rgba(6,182,212,0.10);
  --shadow-btn-brand:   0 4px 14px rgba(6,182,212,0.30);
  --gradient-stat:      linear-gradient(135deg, #06b6d4 0%, #0891b2 60%, #164e63 100%);
  --gradient-hero-blob: radial-gradient(ellipse 600px 400px at 80% 20%, rgba(6,182,212,0.08) 0%, transparent 70%);
  --gradient-accent-blob: radial-gradient(ellipse 400px 300px at 10% 90%, rgba(251,113,133,0.06) 0%, transparent 65%);
}