@charset "UTF-8";
/**
 * Design Tokens — 021-science (Science Worksheets)
 * Primary: #0ea5e9  (HSL 199°, lab sky blue — discovery, exploration)
 * Accent:  #84cc16  (HSL 83°,  lime green — growth, life, energy)
 * Archetype: clean-lab | Font: Space Grotesk | Positioning: modern science museum digital
 *
 * Hue differentiation audit:
 *   021-science primary: HSL 199° (sky blue)
 *   001-arithmetic:      HSL 220° (blue) → distance 21° — acceptable (different category)
 *   008-math:            HSL 220° (blue) → sister site, different domain
 *   Accent lime 83° vs primary 199° → 116° split-complementary ✅
 */

/* ─────────────────────────────────────────────────────
   Google Font import — Space Grotesk for headings
   font-display: swap ensures text visible during load
   ───────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  /* ── Primary (Lab Sky Blue) ── */
  --site-primary:        #0ea5e9;
  --site-primary-hover:  #0284c7;
  --site-primary-dark:   #0c4a6e;
  --site-primary-light:  #f0f9ff;
  --site-primary-border: #bae6fd;

  /* ── Accent (Lime Green — discovery moments) ── */
  --site-accent:         #84cc16;
  --site-accent-hover:   #65a30d;
  --site-accent-dark:    #3f6212;
  --site-accent-light:   #f7fee7;

  /* ── Semantic (universal — do not change) ── */
  --site-success:  #22c55e;
  --site-warning:  #f59e0b;
  --site-error:    #ef4444;

  /* ── Surfaces ── */
  --site-background:           #ffffff;
  --site-surface:              #f0f9ff;
  --site-surface-raised:       #ffffff;
  --site-background-alt:       #e0f2fe;
  --site-background-secondary: #f0f9ff;

  /* ── Text ── */
  --site-text:           #082f49;
  --site-text-primary:   #082f49;
  --site-text-secondary: #0c4a6e;
  --site-text-muted:     #64748b;
  --site-text-light:     #475569;
  --site-text-inverse:   #ffffff;

  /* ── Borders ── */
  --site-border:        #e0f2fe;
  --site-border-light:  #f0f9ff;
  --site-border-medium: #bae6fd;

  /* ── Radius — Soft personality (friendly, approachable science) ── */
  --radius-sm:     4px;
  --radius-md:     8px;
  --radius-lg:     14px;
  --radius-xl:     20px;
  --radius-full:   9999px;
  --radius-button: var(--radius-md);
  --radius-card:   var(--radius-lg);
  --detail-border-radius: var(--radius-lg);

  /* ── Typography ── */
  --font-heading: 'Space Grotesk', 'Inter', system-ui, -apple-system, sans-serif;
  --font-body:    system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  /* ── Type scale ── */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  2rem;
  --text-display: clamp(2.25rem, 5vw, 3.25rem);

  /* ── Spacing (8px base grid) ── */
  --spacing-2xs: 2px;
  --spacing-xs:  4px;
  --spacing-sm:  8px;
  --spacing-md:  16px;
  --spacing-lg:  24px;
  --spacing-xl:  32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;

  /* ── Shadows (tinted with brand sky blue) ── */
  --shadow-sm: 0 1px 3px rgba(14, 165, 233, 0.07);
  --shadow-md: 0 4px 8px rgba(14, 165, 233, 0.10), 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 10px 20px rgba(14, 165, 233, 0.12), 0 4px 6px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 20px 40px rgba(14, 165, 233, 0.14);

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

  /* ── Premium tokens ── */
  --shadow-card-hover: 0 12px 28px rgba(14, 165, 233, 0.16), 0 4px 10px rgba(0, 0, 0, 0.05);
  --shadow-btn-brand:  0 4px 14px rgba(14, 165, 233, 0.30);

  /* Hero: faint sky-blue radial glow top-right + lime hint bottom-left */
  --gradient-hero-blob: radial-gradient(ellipse 700px 450px at 85% 10%, rgba(14, 165, 233, 0.08) 0%, transparent 65%),
                        radial-gradient(ellipse 400px 300px at 10% 90%, rgba(132, 204, 22, 0.06) 0%, transparent 60%);

  /* Stat badge: sky blue to slightly deeper sky */
  --gradient-stat-badge: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);

  /* Body background: tri-tonal wash — sky-light → white → lime-hint */
  --gradient-body: linear-gradient(160deg, #f0f9ff 0%, #ffffff 50%, #f7fee7 100%);

  /* Section accent line */
  --accent-line-width:  3rem;
  --accent-line-height: 3px;

  /* Science-specific: topic tag chip colors (subject areas) */
  --chip-biology-bg:    #f7fee7;
  --chip-biology-color: #3f6212;
  --chip-biology-border: #84cc16;
  --chip-chemistry-bg:  #fef9c3;
  --chip-chemistry-color: #713f12;
  --chip-chemistry-border: #eab308;
  --chip-physics-bg:    #f0f9ff;
  --chip-physics-color: #0c4a6e;
  --chip-physics-border: #0ea5e9;
  --chip-earth-bg:      #f0fdf4;
  --chip-earth-color:   #14532d;
  --chip-earth-border:  #22c55e;
  --chip-space-bg:      #f5f3ff;
  --chip-space-color:   #4c1d95;
  --chip-space-border:  #8b5cf6;

  /* Formula/equation display */
  --formula-bg:     #f0f9ff;
  --formula-border: #bae6fd;
  --formula-color:  #082f49;
}

/* ═══ Dark Mode — Deep Lab ═══ */
@media (prefers-color-scheme: dark) {
  :root {
    /* Primary brightened for dark surfaces */
    --site-primary:        #38bdf8;
    --site-primary-hover:  #7dd3fc;
    --site-primary-dark:   #0ea5e9;
    --site-primary-light:  #082f49;
    --site-primary-border: #0c4a6e;

    /* Accent brighter for dark */
    --site-accent:         #a3e635;
    --site-accent-hover:   #bef264;
    --site-accent-dark:    #84cc16;
    --site-accent-light:   #1a2e05;

    /* Surfaces — deep lab */
    --site-background:           #020f1a;
    --site-surface:              #041c2e;
    --site-surface-raised:       #062540;
    --site-background-alt:       #041c2e;
    --site-background-secondary: #031523;

    /* Text */
    --site-text:           #e0f2fe;
    --site-text-primary:   #e0f2fe;
    --site-text-secondary: #bae6fd;
    --site-text-muted:     #64748b;
    --site-text-light:     #94a3b8;
    --site-text-inverse:   #020f1a;

    /* Borders */
    --site-border:        #0c4a6e;
    --site-border-light:  #041c2e;
    --site-border-medium: #0c4a6e;

    /* Shadows — heavier on dark */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.40);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.50), 0 1px 3px rgba(0, 0, 0, 0.30);
    --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.60), 0 4px 6px rgba(0, 0, 0, 0.30);
    --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.70);
    --shadow-card-hover: 0 12px 28px rgba(0, 0, 0, 0.60), 0 4px 10px rgba(56, 189, 248, 0.15);
    --shadow-btn-brand:  0 4px 14px rgba(56, 189, 248, 0.35);

    /* Dark gradients */
    --gradient-hero-blob: radial-gradient(ellipse 700px 450px at 85% 10%, rgba(56, 189, 248, 0.10) 0%, transparent 65%),
                          radial-gradient(ellipse 400px 300px at 10% 90%, rgba(163, 230, 53, 0.07) 0%, transparent 60%);
    --gradient-stat-badge: linear-gradient(135deg, #0284c7 0%, #0ea5e9 100%);
    --gradient-body: linear-gradient(160deg, #020f1a 0%, #041c2e 50%, #031523 100%);

    /* Science chips — dark mode */
    --chip-biology-bg:    #1a2e05;
    --chip-biology-color: #bef264;
    --chip-biology-border: #65a30d;
    --chip-chemistry-bg:  #2d1f00;
    --chip-chemistry-color: #fde047;
    --chip-chemistry-border: #ca8a04;
    --chip-physics-bg:    #041c2e;
    --chip-physics-color: #7dd3fc;
    --chip-physics-border: #0284c7;
    --chip-earth-bg:      #052e16;
    --chip-earth-color:   #86efac;
    --chip-earth-border:  #16a34a;
    --chip-space-bg:      #2e1065;
    --chip-space-color:   #c4b5fd;
    --chip-space-border:  #7c3aed;

    /* Formula dark */
    --formula-bg:     #041c2e;
    --formula-border: #0c4a6e;
    --formula-color:  #e0f2fe;
  }
}