/* base.css - CSS variables, resets, typography, body styles */

:root {
    /* Colors - Light Mode (default) */
    --bg-primary: #f5f0ff;
    --bg-secondary: #ffffff;
    --bg-card: rgba(255, 255, 255, 0.85);
    --accent-purple: #b388ff;
    --accent-pink: #f48fb1;
    --accent-gradient: linear-gradient(135deg, #b388ff, #f48fb1);
    --text-primary: #2d2640;
    --text-secondary: #7b6f8a;
    --text-muted: #b0a3c0;
    --border-light: #ede5f7;
    
    /* Glass Variables - Light Mode */
    --glass-bg: rgba(245, 240, 255, 0.12);
    --glass-border: rgba(179, 136, 255, 0.35);
    --glass-blur: 12px;
    --glass-shadow: 0 4px 20px rgba(179, 136, 255, 0.15);
    
    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    
    /* Border Radius */
    --radius-sm: 12px;
    --radius-md: 16px;
    --radius-lg: 20px;
    --radius-xl: 24px;
    --radius-pill: 999px;
    
    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(45, 38, 64, 0.08);
    --shadow-md: 0 4px 12px rgba(45, 38, 64, 0.1);
    --shadow-lg: 0 8px 24px rgba(45, 38, 64, 0.12);
    
    /* Heights */
    --header-height: 60px;
    --subnav-height: 56px;
    --bottom-nav-height: 72px;

    /* Enhanced Surface Tokens */
    --surface-soft: rgba(245, 240, 255, 0.5);
    --surface-strong: rgba(255, 255, 255, 0.9);
    --surface-elevated: rgba(255, 255, 255, 0.95);
    --surface-overlay: rgba(245, 240, 255, 0.85);
    --overlay-dark: rgba(0, 0, 0, 0.4);

    /* Interaction */
    --interactive-press-scale: 0.97;

    /* Easing */
    --transition-snappy: cubic-bezier(0.16, 1, 0.3, 1);
    --transition-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* Dark Mode Theme */
html[data-theme="dark"] {
    --bg-primary: #1a1a2e;
    --bg-secondary: #2a2a3e;
    --bg-card: rgba(42, 42, 62, 0.85);
    --text-primary: #e0e0e0;
    --text-secondary: #a0a0b0;
    --text-muted: #707080;
    --border-light: #3a3a4e;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
    
    /* Glass Variables - Dark Mode */
    --glass-bg: rgba(26, 26, 46, 0.12);
    --glass-border: rgba(179, 136, 255, 0.3);
    --glass-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);

    /* Enhanced Surface Tokens - Dark */
    --text-muted: #8888A0;
    --surface-soft: rgba(42, 42, 62, 0.5);
    --surface-strong: rgba(42, 42, 62, 0.9);
    --surface-elevated: rgba(50, 50, 70, 0.95);
    --surface-overlay: rgba(26, 26, 46, 0.9);
    --overlay-dark: rgba(0, 0, 0, 0.6);
}

html[data-theme="oled"] {
    /* OLED = exact copy of dark mode, only backgrounds/surfaces change to pure black */

    /* Backgrounds — the ONLY things that differ from dark mode */
    --bg-primary: #000000;
    --bg-secondary: #0a0a0a;
    --bg-card: rgba(15, 15, 15, 0.95);

    /* Everything below is copied verbatim from dark mode */
    --text-primary: #e0e0e0;
    --text-secondary: #a0a0b0;
    --text-muted: #8888A0;
    --border-light: #3a3a4e;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);

    /* Glass — same as dark mode */
    --glass-bg: rgba(26, 26, 46, 0.12);
    --glass-border: rgba(179, 136, 255, 0.3);
    --glass-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);

    /* Surface tokens — dark mode values but with OLED black bases */
    --surface-soft: rgba(15, 15, 15, 0.5);
    --surface-strong: rgba(15, 15, 15, 0.9);
    --surface-elevated: rgba(20, 20, 20, 0.95);
    --surface-overlay: rgba(0, 0, 0, 0.95);
    --overlay-dark: rgba(0, 0, 0, 0.8);
}

/* Reset & Base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    background: var(--bg-primary);
}

body {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Typography - Headings */
h1, h2, h3 {
    font-family: 'Bricolage Grotesque', 'Plus Jakarta Sans', sans-serif;
}

h1 {
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
}

h2 {
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

h3 {
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.25;
}

/* Inherit font on form elements */
button, input, textarea, select {
    font: inherit;
}

/* Skip to Content - A11y */
.skip-to-content {
    position: absolute;
    top: -100%;
    left: 16px;
    z-index: 10001;
    padding: 12px 24px;
    background: var(--accent-gradient);
    color: white;
    border-radius: var(--radius-pill);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: top 0.2s ease;
}

.skip-to-content:focus {
    top: 16px;
}

/* Atmospheric Depth - Noise Grain */
/* Noise grain removed — feTurbulence SVG filter crashes Safari/WebKit on iOS */

/* Atmospheric Depth - Ambient Gradients */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 60% 50% at 15% 10%, rgba(179, 136, 255, 0.06), transparent 70%),
        radial-gradient(ellipse 50% 60% at 85% 90%, rgba(244, 143, 177, 0.05), transparent 70%);
}

/* Dark theme atmospheric overrides */
html[data-theme="dark"] body::after {
    background:
        radial-gradient(ellipse 60% 50% at 15% 10%, rgba(179, 136, 255, 0.1), transparent 70%),
        radial-gradient(ellipse 50% 60% at 85% 90%, rgba(244, 143, 177, 0.08), transparent 70%);
}

/* OLED theme atmospheric overrides */
html[data-theme="oled"] body::after {
    background:
        radial-gradient(ellipse 60% 50% at 15% 10%, rgba(179, 136, 255, 0.06), transparent 70%),
        radial-gradient(ellipse 50% 60% at 85% 90%, rgba(244, 143, 177, 0.04), transparent 70%);
}