/* 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.15);
    --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;
}

/* 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.1);
    --glass-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

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

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}