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

:root {
    /* Colors - Light Mode (default) */
    --bg-primary: #FAF8F5;
    --bg-secondary: #FFFFFF;
    --bg-card: rgba(255, 255, 255, 0.88);
    --accent-purple: #C4B5FD;
    --accent-pink: #F9A8D4;
    --accent-gradient: linear-gradient(135deg, #C4B5FD, #F9A8D4);
    --text-primary: #1C1917;
    --text-secondary: #78716C;
    --text-muted: #A8A29E;
    --border-light: #E7E5E4;
    
    /* Glass Variables - Light Mode */
    --glass-bg: rgba(250, 248, 245, 0.72);
    --glass-border: rgba(196, 181, 253, 0.12);
    --glass-blur: 16px;
    --glass-shadow: 0 4px 24px rgba(28, 25, 23, 0.06);
    
    /* 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 - warm tinted */
    --shadow-sm: 0 1px 4px rgba(28, 25, 23, 0.05);
    --shadow-md: 0 8px 24px rgba(28, 25, 23, 0.07);
    --shadow-lg: 0 16px 40px rgba(28, 25, 23, 0.09);
    
    /* Heights */
    --header-height: 60px;
    --subnav-height: 56px;
    --bottom-nav-height: 72px;

    /* Easing */
    --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark Mode Theme */
html[data-theme="dark"] {
    --bg-primary: #161520;
    --bg-secondary: #1E1D2A;
    --bg-card: rgba(30, 29, 42, 0.88);
    --accent-purple: #C4B5FD;
    --accent-pink: #F9A8D4;
    --accent-gradient: linear-gradient(135deg, #C4B5FD, #F9A8D4);
    --text-primary: #EDEDED;
    --text-secondary: #9CA3AF;
    --text-muted: #6B7280;
    --border-light: #2D2C3A;
    --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.45);
    
    /* Glass Variables - Dark Mode */
    --glass-bg: rgba(22, 21, 32, 0.72);
    --glass-border: rgba(196, 181, 253, 0.08);
    --glass-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);

    /* Elevation */
    --elevation-1: rgba(255, 255, 255, 0.02);
    --elevation-2: rgba(255, 255, 255, 0.04);
    --elevation-3: rgba(255, 255, 255, 0.06);
}

html[data-theme="oled"] {
    --bg-primary: #000000;
    --bg-secondary: #0C0B12;
    --bg-card: rgba(12, 11, 18, 0.95);
    --accent-purple: #C4B5FD;
    --accent-pink: #F9A8D4;
    --accent-gradient: linear-gradient(135deg, #C4B5FD, #F9A8D4);
    --text-primary: #E8E8E8;
    --text-secondary: #8A8A9A;
    --text-muted: #5A5A6A;
    --border-light: #1A1920;
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    
    /* Glass Variables - OLED Mode */
    --glass-bg: rgba(12, 11, 18, 0.85);
    --glass-border: rgba(196, 181, 253, 0.06);
    --glass-shadow: none;

    /* Elevation */
    --elevation-1: rgba(255, 255, 255, 0.03);
    --elevation-2: rgba(255, 255, 255, 0.05);
    --elevation-3: rgba(255, 255, 255, 0.07);
}

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

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

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

/* Subtle background mesh */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background: 
        radial-gradient(ellipse at 20% 0%, rgba(196, 181, 253, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 100%, rgba(249, 168, 212, 0.04) 0%, transparent 50%);
}

html[data-theme="dark"] body::before {
    background: 
        radial-gradient(ellipse at 20% 0%, rgba(196, 181, 253, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 100%, rgba(249, 168, 212, 0.05) 0%, transparent 50%);
}

html[data-theme="oled"] body::before {
    background: 
        radial-gradient(ellipse at 20% 0%, rgba(196, 181, 253, 0.04) 0%, transparent 40%),
        radial-gradient(ellipse at 80% 100%, rgba(249, 168, 212, 0.02) 0%, transparent 40%);
}