/* ─────────────────────────────────────────────────────────────────────────
   E-SO Design System

   Single source of truth for typography, colors, and spacing.
   Imported by all student-facing pages.
   ───────────────────────────────────────────────────────────────────────── */

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

:root {
    /* ── TYPOGRAPHY ── */
    --font-sans: 'Nunito', sans-serif;

    /* ── BACKGROUND & SURFACE ── */
    --bg-primary: #070D1A;           /* Very deep navy — page background */
    --bg-secondary: #0F1C30;         /* Slightly lighter — card backgrounds */
    --bg-raised: #162438;            /* Elevated surface (modals, popovers) */

    /* ── TEXT ── */
    --text-primary: #F0F4FF;         /* Near-white with blue tint */
    --text-secondary: #B8C5D6;       /* Muted but still readable */
    --text-muted: #8CA3C0;           /* Further muted for hints/helpers */

    /* ── INTERACTIVE ── */
    --accent: #F59E0B;               /* Amber/gold — primary CTA */
    --accent-hover: #D97706;         /* Darker amber on hover */
    --accent-dark: #B45309;          /* Pressed state */
    --border-subtle: rgba(255,255,255,0.08);
    --border-light: rgba(255,255,255,0.15);

    /* ── EVENT MISSION COLORS ── */
    --event-ocean: #0EA5E9;          /* Deep Blue Sea */
    --event-ocean-dark: #0284C7;     /* Hover/pressed */

    --event-bio: #22C55E;            /* Backyard Biologist */
    --event-bio-dark: #16A34A;

    --event-disease: #EF4444;        /* Disease Detectives */
    --event-disease-dark: #DC2626;

    --event-stars: #A78BFA;          /* Starry Starry Night */
    --event-stars-dark: #9333EA;

    --event-build: #F59E0B;          /* Barge/Bridge/Straw Egg Drop */
    --event-build-dark: #D97706;

    --event-crime: #EF4444;          /* Crime Busters */
    --event-crime-dark: #DC2626;

    --event-data: #3B82F6;           /* Data Crunchers */
    --event-data-dark: #2563EB;

    --event-science: #10B981;        /* Grab a Gram */
    --event-science-dark: #059669;

    --event-architecture: #8B5CF6;   /* Mystery Architecture */
    --event-architecture-dark: #7C3AED;

    --event-rockets: #F97316;        /* Paper Rockets */
    --event-rockets-dark: #EA580C;

    --event-earth: #92400E;          /* Rock Hounds */
    --event-earth-dark: #78350F;

    --event-machines: #64748B;       /* Simple Machines */
    --event-machines-dark: #475569;

    /* ── SPACING ── */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;

    /* ── SIZING ── */
    --touch-min: 44px;               /* Min touch target (iOS) */

    /* ── EFFECTS ── */
    --transition-fast: 150ms ease-out;
    --transition-normal: 200ms ease-out;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;

    /* ── SHADOWS ── */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
    --shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
    --shadow-xl: 0 20px 25px rgba(0,0,0,0.15);
}

/* ── GLOBAL BASE ── */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── TYPOGRAPHY ── */
h1, h2, h3, h4, h5, h6 {
    font-weight: 800;
    line-height: 1.2;
}

h1 {
    font-size: 48px;
}

h2 {
    font-size: 32px;
}

h3 {
    font-size: 24px;
}

h4 {
    font-size: 20px;
}

body, p {
    font-size: 16px;
    font-weight: 400;
}

/* ── LINKS ── */
a {
    color: var(--accent);
    text-decoration: none;
    transition: color var(--transition-fast);
}

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

/* ── BUTTONS ── */
button, [role="button"] {
    font-family: var(--font-sans);
    cursor: pointer;
    border: none;
    transition: all var(--transition-fast);
}

button:focus-visible, [role="button"]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ── FORMS ── */
input, textarea, select {
    font-family: var(--font-sans);
    font-size: 16px;
    padding: var(--spacing-md);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    color: var(--text-primary);
    transition: border-color var(--transition-fast), background var(--transition-fast);
}

input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--bg-raised);
}

label {
    display: block;
    font-weight: 600;
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-sm);
}

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

/* ── ACCESSIBILITY ── */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── LIGHT THEME ── */
/* Applied when user toggles light mode; overrides dark defaults */
html[data-theme="light"] {
    --bg-primary: #F8FAFC;
    --bg-secondary: #EFF3F8;
    --bg-raised: #FFFFFF;
    --text-primary: #1A202C;
    --text-secondary: #4A5568;
    --text-muted: #718096;
    --border-subtle: rgba(0,0,0,0.08);
    --border-light: rgba(0,0,0,0.15);
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.08);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.06);
    --shadow-lg: 0 10px 15px rgba(0,0,0,0.06);
    --shadow-xl: 0 20px 25px rgba(0,0,0,0.08);
}

/* Light-mode event background gradients */
html[data-theme="light"] .bg-event-ocean { background: linear-gradient(180deg, #E0F2FE 0%, #BAE6FD 60%, #7DD3FC 100%); }
html[data-theme="light"] .bg-event-bio { background: linear-gradient(135deg, #DCFCE7 0%, #BBF7D0 50%, #86EFAC 100%); }
html[data-theme="light"] .bg-event-disease { background: linear-gradient(135deg, #FEE2E2 0%, #FECACA 100%); }
html[data-theme="light"] .bg-event-stars { background: linear-gradient(180deg, #F5F3FF 0%, #EDE9FE 60%, #DDD6FE 100%); }
html[data-theme="light"] .bg-event-build { background: linear-gradient(135deg, #FEF9C3 0%, #FDE68A 100%); }
html[data-theme="light"] .bg-event-crime { background: linear-gradient(135deg, #FEE2E2 0%, #FECACA 100%); }
html[data-theme="light"] .bg-event-data { background: linear-gradient(135deg, #DBEAFE 0%, #BFDBFE 100%); }
html[data-theme="light"] .bg-event-science { background: linear-gradient(135deg, #D1FAE5 0%, #A7F3D0 100%); }
html[data-theme="light"] .bg-event-architecture { background: linear-gradient(135deg, #EDE9FE 0%, #DDD6FE 100%); }
html[data-theme="light"] .bg-event-rockets { background: linear-gradient(135deg, #FFEDD5 0%, #FED7AA 100%); }
html[data-theme="light"] .bg-event-earth { background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%); }
html[data-theme="light"] .bg-event-machines { background: linear-gradient(135deg, #F1F5F9 0%, #E2E8F0 100%); }
html[data-theme="light"] .bg-event-weather { background: linear-gradient(135deg, #E0F2FE 0%, #BAE6FD 100%); }

/* ── EVENT-SPECIFIC THEMES ── */
/* These override the base palette when an event context is detected */

/* Deep Blue Sea theme */
body[data-event="deep-blue-sea"],
body[data-event="ocean"] {
    --accent: #0EA5E9;
    --accent-hover: #06B6D4;
    --accent-dark: #0284C7;
    --event-accent-bg: rgba(14, 165, 233, 0.1);
    --event-accent-border: rgba(14, 165, 233, 0.3);
}

/* Backyard Biologist theme */
body[data-event="backyard-biologist"],
body[data-event="bio"] {
    --accent: #22C55E;
    --accent-hover: #16A34A;
    --accent-dark: #15803D;
    --event-accent-bg: rgba(34, 197, 94, 0.1);
    --event-accent-border: rgba(34, 197, 94, 0.3);
}

/* Disease Detectives theme */
body[data-event="disease-detectives"],
body[data-event="disease"] {
    --accent: #EF4444;
    --accent-hover: #DC2626;
    --accent-dark: #B91C1C;
    --event-accent-bg: rgba(239, 68, 68, 0.1);
    --event-accent-border: rgba(239, 68, 68, 0.3);
}

/* Starry Starry Night theme */
body[data-event="starry-starry-night"],
body[data-event="starry-night"],
body[data-event="stars"] {
    --accent: #A78BFA;
    --accent-hover: #9333EA;
    --accent-dark: #7E22CE;
    --event-accent-bg: rgba(167, 139, 250, 0.1);
    --event-accent-border: rgba(167, 139, 250, 0.3);
}

/* Barge Building / Straw Egg Drop theme */
body[data-event="barge-building"],
body[data-event="straw-egg-drop"] {
    --accent: #F59E0B;
    --accent-hover: #D97706;
    --accent-dark: #B45309;
    --event-accent-bg: rgba(245, 158, 11, 0.1);
    --event-accent-border: rgba(245, 158, 11, 0.3);
}

/* Bridge Building theme */
body[data-event="bridge-building"] {
    --accent: #6B7280;
    --accent-hover: #4B5563;
    --accent-dark: #374151;
    --event-accent-bg: rgba(107, 114, 128, 0.1);
    --event-accent-border: rgba(107, 114, 128, 0.3);
}

/* Crime Busters theme */
body[data-event="crime-busters"] {
    --accent: #EF4444;
    --accent-hover: #DC2626;
    --accent-dark: #B91C1C;
    --event-accent-bg: rgba(239, 68, 68, 0.1);
    --event-accent-border: rgba(239, 68, 68, 0.3);
}

/* Data Crunchers theme */
body[data-event="data-crunchers"] {
    --accent: #3B82F6;
    --accent-hover: #2563EB;
    --accent-dark: #1D4ED8;
    --event-accent-bg: rgba(59, 130, 246, 0.1);
    --event-accent-border: rgba(59, 130, 246, 0.3);
}

/* Grab a Gram theme */
body[data-event="grab-a-gram"] {
    --accent: #10B981;
    --accent-hover: #059669;
    --accent-dark: #047857;
    --event-accent-bg: rgba(16, 185, 129, 0.1);
    --event-accent-border: rgba(16, 185, 129, 0.3);
}

/* Mystery Architecture theme */
body[data-event="mystery-architecture"] {
    --accent: #8B5CF6;
    --accent-hover: #7C3AED;
    --accent-dark: #6D28D9;
    --event-accent-bg: rgba(139, 92, 246, 0.1);
    --event-accent-border: rgba(139, 92, 246, 0.3);
}

/* No Bones About It theme (same as Backyard Biologist) */
body[data-event="no-bones-about-it"] {
    --accent: #22C55E;
    --accent-hover: #16A34A;
    --accent-dark: #15803D;
    --event-accent-bg: rgba(34, 197, 94, 0.1);
    --event-accent-border: rgba(34, 197, 94, 0.3);
}

/* Paper Rockets theme */
body[data-event="paper-rockets"] {
    --accent: #F97316;
    --accent-hover: #EA580C;
    --accent-dark: #C2410C;
    --event-accent-bg: rgba(249, 115, 22, 0.1);
    --event-accent-border: rgba(249, 115, 22, 0.3);
}

/* Rock Hounds theme */
body[data-event="rock-hounds"] {
    --accent: #92400E;
    --accent-hover: #78350F;
    --accent-dark: #451A03;
    --event-accent-bg: rgba(146, 64, 14, 0.1);
    --event-accent-border: rgba(146, 64, 14, 0.3);
}

/* Simple Machines theme */
body[data-event="simple-machines"] {
    --accent: #64748B;
    --accent-hover: #475569;
    --accent-dark: #334155;
    --event-accent-bg: rgba(100, 116, 139, 0.1);
    --event-accent-border: rgba(100, 116, 139, 0.3);
}

/* Water Rockets theme (same as Deep Blue Sea) */
body[data-event="water-rockets"] {
    --accent: #0EA5E9;
    --accent-hover: #06B6D4;
    --accent-dark: #0284C7;
    --event-accent-bg: rgba(14, 165, 233, 0.1);
    --event-accent-border: rgba(14, 165, 233, 0.3);
}

/* Weather or Not theme */
body[data-event="weather-or-not"] {
    --accent: #0EA5E9;
    --accent-hover: #06B6D4;
    --accent-dark: #0284C7;
    --event-accent-bg: rgba(14, 165, 233, 0.1);
    --event-accent-border: rgba(14, 165, 233, 0.3);
}

/* ── EVENT BACKGROUND GRADIENTS ── */
/* Use these on event hub pages for immersive backgrounds */

.bg-event-ocean { background: linear-gradient(180deg, #001428 0%, #002b5b 60%, #1e3c72 100%); }
.bg-event-bio { background: linear-gradient(135deg, #1a2e1a 0%, #2d4a2d 50%, #3d6b3d 100%); }
.bg-event-disease { background: linear-gradient(135deg, #1a1a2e 0%, #2e1a1a 100%); }
.bg-event-stars { background: linear-gradient(180deg, #09090b 0%, #1a0a2e 60%, #0d0d1a 100%); }
.bg-event-build { background: linear-gradient(135deg, #1a1708 0%, #2e2810 100%); }
.bg-event-crime { background: linear-gradient(135deg, #1a1a2e 0%, #4a0e0e 100%); }
.bg-event-data { background: linear-gradient(135deg, #0a1628 0%, #1a2e5b 100%); }
.bg-event-science { background: linear-gradient(135deg, #0a1a14 0%, #1a3028 100%); }
.bg-event-architecture { background: linear-gradient(135deg, #1a0a2e 0%, #2e1a4a 100%); }
.bg-event-rockets { background: linear-gradient(135deg, #1a120a 0%, #2e1c0f 100%); }
.bg-event-earth { background: linear-gradient(135deg, #1a1008 0%, #3b2512 100%); }
.bg-event-machines { background: linear-gradient(135deg, #111827 0%, #1e293b 100%); }
.bg-event-weather { background: linear-gradient(135deg, #0a1628 0%, #1a3a5b 100%); }

/* ── SKELETON LOADING ── */
@keyframes skeleton-pulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 0.25; }
}

.skeleton {
    background: var(--bg-raised);
    border-radius: var(--radius-md);
    animation: skeleton-pulse 1.8s ease-in-out infinite;
    pointer-events: none;
}

.skeleton-text {
    height: 1em;
    margin-bottom: 0.6em;
    background: var(--bg-raised);
    border-radius: var(--radius-sm);
    animation: skeleton-pulse 1.8s ease-in-out infinite;
}

.skeleton-text.short { width: 40%; }
.skeleton-text.medium { width: 70%; }
.skeleton-text.long { width: 95%; }

.skeleton-card {
    height: 200px;
    background: var(--bg-raised);
    border-radius: var(--radius-lg);
    animation: skeleton-pulse 1.8s ease-in-out infinite;
}

.skeleton-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--bg-raised);
    animation: skeleton-pulse 1.8s ease-in-out infinite;
}

.skeleton-btn {
    height: 44px;
    width: 120px;
    background: var(--bg-raised);
    border-radius: var(--radius-md);
    animation: skeleton-pulse 1.8s ease-in-out infinite;
}

/* Hide skeleton when real content loads */
.skeleton-hide-when-loaded.loaded .skeleton,
.skeleton-hide-when-loaded.loaded .skeleton-text,
.skeleton-hide-when-loaded.loaded .skeleton-card {
    display: none;
}

/* ── RESPONSIVE BASE ── */
@media (max-width: 768px) {
    h1 {
        font-size: 36px;
    }

    h2 {
        font-size: 26px;
    }

    body, p {
        font-size: 15px;
    }
}