/* ==========================================================================
   sims.science — Design Token System
   Comprehensive CSS custom properties with 5 theme variants.

   Architecture:
   - Base layer: reset, typography, spacing, radii, shadows (theme-agnostic)
   - Theme layer: color palettes under [data-theme="name"]
   - Font layer: Google Font @import + font-family assignments per theme

   Author: ScienceEd UI/UX Design
   Version: 2.0.0
   ========================================================================== */

/* ==========================================================================
   Google Fonts — All pairs preloaded
   Font Pair A: Inter + DM Serif Display (Modern Blue, Minimal Mono)
   Font Pair B: Source Sans 3 + Playfair Display (Warm Academic)
   Font Pair C: DM Sans + Outfit (Dark Tech)
   Font Pair D: Inter + Sora (Fresh Green)
   Font Pair E: Inter + Space Grotesk (Minimal Mono)
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=DM+Serif+Display:ital@0;1&family=Inter:wght@400;500;600;700;800&family=Outfit:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500&family=Sora:wght@400;500;600;700&family=Source+Sans+3:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* ==========================================================================
   BASE LAYER — Theme-agnostic tokens (spacing, radii, shadows, transitions)
   ========================================================================== */
:root {
  /* ── Spacing Scale (4px grid) ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ── Border Radius ── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* ── Shadows (elevation system) ── */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 6px -2px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.03);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.06), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.12);

  /* ── Typography Scale ── */
  --text-xs: 0.75rem;    /* 12px — captions, badges */
  --text-sm: 0.875rem;   /* 14px — body small, labels */
  --text-base: 1rem;     /* 16px — body */
  --text-lg: 1.125rem;   /* 18px — body large */
  --text-xl: 1.25rem;    /* 20px — h4 */
  --text-2xl: 1.5rem;    /* 24px — h3 */
  --text-3xl: 1.875rem;  /* 30px — h2 */
  --text-4xl: 2.25rem;   /* 36px — h1 mobile */
  --text-5xl: 3rem;      /* 48px — h1 desktop */
  --text-6xl: 3.75rem;   /* 60px — hero large */

  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.025em;

  /* ── Transitions ── */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Layout ── */
  --container-max: 1200px;
  --container-narrow: 800px;
  --container-wide: 1400px;

  /* ── Z-Index Scale ── */
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
}

/* ==========================================================================
   RESET & BASE
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text-primary);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg, video {
  display: block;
  max-width: 100%;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-primary-hover);
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

/* ==========================================================================
   THEME 1: Modern Blue — Clean, trustworthy, elevated education standard
   ========================================================================== */
[data-theme="modern-blue"] {
  /* ── Brand Colors ── */
  --color-primary: #2563EB;
  --color-primary-hover: #1D4ED8;
  --color-primary-light: #EFF6FF;
  --color-primary-subtle: #DBEAFE;
  --color-secondary: #1E40AF;
  --color-secondary-light: #F0F5FF;

  /* ── Surface & Background ── */
  --color-bg: #F8FAFC;
  --color-bg-alt: #F1F5F9;
  --color-surface: #FFFFFF;
  --color-surface-raised: #FFFFFF;
  --color-surface-subtle: #F8FAFC;
  --color-border: #E2E8F0;
  --color-border-light: #F1F5F9;
  --color-border-focus: #2563EB;

  /* ── Text ── */
  --color-text-primary: #0F172A;
  --color-text-secondary: #475569;
  --color-text-tertiary: #94A3B8;
  --color-text-inverse: #FFFFFF;
  --color-text-link: #2563EB;

  /* ── Semantic ── */
  --color-success: #10B981;
  --color-success-light: #D1FAE5;
  --color-warning: #F59E0B;
  --color-warning-light: #FEF3C7;
  --color-error: #EF4444;
  --color-error-light: #FEE2E2;
  --color-info: #3B82F6;
  --color-info-light: #DBEAFE;

  /* ── Typography ── */
  --font-heading: 'DM Serif Display', 'Georgia', 'Times New Roman', serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'JetBrains Mono', monospace;

  /* ── Shadows (theme-aware) ── */
  --shadow-focus: 0 0 0 3px rgba(37, 99, 235, 0.25);
  --shadow-card-hover: 0 8px 30px rgba(0, 0, 0, 0.08);

  /* ── Gradient ── */
  --gradient-hero: linear-gradient(180deg, #FFFFFF 0%, #EFF6FF 100%);
  --gradient-cta: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
}

/* ==========================================================================
   THEME 2: Warm Academic — Amber/Gold, bookish, prestigious
   ========================================================================== */
[data-theme="warm-academic"] {
  /* ── Brand Colors ── */
  --color-primary: #D97706;
  --color-primary-hover: #B45309;
  --color-primary-light: #FFFBEB;
  --color-primary-subtle: #FEF3C7;
  --color-secondary: #92400E;
  --color-secondary-light: #FFF7ED;

  /* ── Surface & Background ── */
  --color-bg: #FFFDF7;
  --color-bg-alt: #FFF7ED;
  --color-surface: #FFFFFF;
  --color-surface-raised: #FFFFFF;
  --color-surface-subtle: #FFFBEB;
  --color-border: #E7DCC8;
  --color-border-light: #F5EFE0;
  --color-border-focus: #D97706;

  /* ── Text ── */
  --color-text-primary: #1C1917;
  --color-text-secondary: #57534E;
  --color-text-tertiary: #A8A29E;
  --color-text-inverse: #FFFFFF;
  --color-text-link: #D97706;

  /* ── Semantic ── */
  --color-success: #059669;
  --color-success-light: #D1FAE5;
  --color-warning: #D97706;
  --color-warning-light: #FEF3C7;
  --color-error: #DC2626;
  --color-error-light: #FEE2E2;
  --color-info: #7C3AED;
  --color-info-light: #EDE9FE;

  /* ── Typography ── */
  --font-heading: 'Playfair Display', 'Georgia', 'Times New Roman', serif;
  --font-body: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'JetBrains Mono', monospace;

  /* ── Shadows (theme-aware) ── */
  --shadow-focus: 0 0 0 3px rgba(217, 119, 6, 0.25);
  --shadow-card-hover: 0 8px 30px rgba(0, 0, 0, 0.06);

  /* ── Gradient ── */
  --gradient-hero: linear-gradient(180deg, #FFFDF7 0%, #FFFBEB 100%);
  --gradient-cta: linear-gradient(135deg, #D97706 0%, #B45309 100%);
}

/* ==========================================================================
   THEME 3: Dark Tech — Navy/Black + neon accent (Brilliant.org inspired)
   ========================================================================== */
[data-theme="dark-tech"] {
  /* ── Brand Colors ── */
  --color-primary: #06B6D4;
  --color-primary-hover: #22D3EE;
  --color-primary-light: rgba(6, 182, 212, 0.12);
  --color-primary-subtle: rgba(6, 182, 212, 0.08);
  --color-secondary: #6366F1;
  --color-secondary-light: rgba(99, 102, 241, 0.12);

  /* ── Surface & Background ── */
  --color-bg: #0B1121;
  --color-bg-alt: #111827;
  --color-surface: #1A2332;
  --color-surface-raised: #1F2A3D;
  --color-surface-subtle: #151E2D;
  --color-border: #1E293B;
  --color-border-light: #263348;
  --color-border-focus: #06B6D4;

  /* ── Text ── */
  --color-text-primary: #F1F5F9;
  --color-text-secondary: #94A3B8;
  --color-text-tertiary: #64748B;
  --color-text-inverse: #0B1121;
  --color-text-link: #06B6D4;

  /* ── Semantic ── */
  --color-success: #10B981;
  --color-success-light: rgba(16, 185, 129, 0.12);
  --color-warning: #F59E0B;
  --color-warning-light: rgba(245, 158, 11, 0.12);
  --color-error: #EF4444;
  --color-error-light: rgba(239, 68, 68, 0.12);
  --color-info: #3B82F6;
  --color-info-light: rgba(59, 130, 246, 0.12);

  /* ── Typography ── */
  --font-heading: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'JetBrains Mono', monospace;

  /* ── Shadows (theme-aware) — lighter on dark bg ── */
  --shadow-focus: 0 0 0 3px rgba(6, 182, 212, 0.35);
  --shadow-card-hover: 0 8px 30px rgba(0, 0, 0, 0.3);

  /* ── Gradient ── */
  --gradient-hero: linear-gradient(180deg, #0B1121 0%, #111827 50%, #0B1121 100%);
  --gradient-cta: linear-gradient(135deg, #06B6D4 0%, #6366F1 100%);
}

/* ==========================================================================
   THEME 4: Fresh Green — Nature/Science, growth-oriented, vibrant
   ========================================================================== */
[data-theme="fresh-green"] {
  /* ── Brand Colors ── */
  --color-primary: #059669;
  --color-primary-hover: #047857;
  --color-primary-light: #ECFDF5;
  --color-primary-subtle: #D1FAE5;
  --color-secondary: #065F46;
  --color-secondary-light: #F0FDF4;

  /* ── Surface & Background ── */
  --color-bg: #F9FCFA;
  --color-bg-alt: #ECFDF5;
  --color-surface: #FFFFFF;
  --color-surface-raised: #FFFFFF;
  --color-surface-subtle: #F0FDF4;
  --color-border: #D1E7DB;
  --color-border-light: #E8F5ED;
  --color-border-focus: #059669;

  /* ── Text ── */
  --color-text-primary: #0A1F16;
  --color-text-secondary: #374C42;
  --color-text-tertiary: #729987;
  --color-text-inverse: #FFFFFF;
  --color-text-link: #059669;

  /* ── Semantic ── */
  --color-success: #059669;
  --color-success-light: #D1FAE5;
  --color-warning: #D97706;
  --color-warning-light: #FEF3C7;
  --color-error: #DC2626;
  --color-error-light: #FEE2E2;
  --color-info: #0891B2;
  --color-info-light: #ECFEFF;

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

  /* ── Shadows (theme-aware) ── */
  --shadow-focus: 0 0 0 3px rgba(5, 150, 105, 0.25);
  --shadow-card-hover: 0 8px 30px rgba(0, 0, 0, 0.06);

  /* ── Gradient ── */
  --gradient-hero: linear-gradient(180deg, #F9FCFA 0%, #ECFDF5 100%);
  --gradient-cta: linear-gradient(135deg, #059669 0%, #047857 100%);
}

/* ==========================================================================
   THEME 5: Minimal Mono — Black/White/Gray, typography-first (Apple-like)
   ========================================================================== */
[data-theme="minimal-mono"] {
  /* ── Brand Colors ── */
  --color-primary: #171717;
  --color-primary-hover: #404040;
  --color-primary-light: #F5F5F5;
  --color-primary-subtle: #E5E5E5;
  --color-secondary: #525252;
  --color-secondary-light: #FAFAFA;

  /* ── Surface & Background ── */
  --color-bg: #FFFFFF;
  --color-bg-alt: #FAFAFA;
  --color-surface: #FFFFFF;
  --color-surface-raised: #FFFFFF;
  --color-surface-subtle: #FAFAFA;
  --color-border: #E5E5E5;
  --color-border-light: #F5F5F5;
  --color-border-focus: #171717;

  /* ── Text ── */
  --color-text-primary: #0A0A0A;
  --color-text-secondary: #525252;
  --color-text-tertiary: #A3A3A3;
  --color-text-inverse: #FFFFFF;
  --color-text-link: #171717;

  /* ── Semantic ── */
  --color-success: #166534;
  --color-success-light: #DCFCE7;
  --color-warning: #854D0E;
  --color-warning-light: #FEF9C3;
  --color-error: #991B1B;
  --color-error-light: #FEE2E2;
  --color-info: #075985;
  --color-info-light: #E0F2FE;

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

  /* ── Shadows (theme-aware) — minimal, crisp ── */
  --shadow-focus: 0 0 0 2px rgba(23, 23, 23, 0.3);
  --shadow-card-hover: 0 4px 20px rgba(0, 0, 0, 0.06);

  /* ── Gradient ── */
  --gradient-hero: linear-gradient(180deg, #FFFFFF 0%, #FAFAFA 100%);
  --gradient-cta: linear-gradient(135deg, #171717 0%, #404040 100%);
}

/* ==========================================================================
   TRANSITION LAYER — Smooth theme switching
   ========================================================================== */
body,
body *,
body *::before,
body *::after {
  transition:
    background-color var(--transition-base),
    border-color var(--transition-base),
    color var(--transition-fast),
    box-shadow var(--transition-base);
}

/* Prevent transition on page load */
.no-transitions,
.no-transitions *,
.no-transitions *::before,
.no-transitions *::after {
  transition: none !important;
}

/* ==========================================================================
   UTILITY CLASSES
   ========================================================================== */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.container-narrow {
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.container-wide {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}