/* ========================================
   BASE.CSS - Foundation & Variables
   Octonance Mobile-First Design System
   ======================================== */

:root {
    /* ==========================================
       LIGHT MODE (Default)
       ========================================== */
    
    /* Primary Palette - Warm Coral Clay */
    --primary-50: #FEF6F4;
    --primary-100: #FCEAE5;
    --primary-200: #F8D4CA;
    --primary-300: #F0B5A5;
    --primary-400: #E8917A;
    --primary-500: #D97659;
    --primary-600: #C45D42;
    --primary-700: #9E4633;
    
    /* Accent - Soft Teal */
    --accent-400: #6BB8B2;
    --accent-500: #4A9E97;
    --accent-600: #3A7D78;
    
    /* Secondary Accent - Soft Lavender */
    --secondary-400: #A99ED4;
    --secondary-500: #8B7FC4;
    --secondary-600: #6E62A8;
    
    /* Neutrals - Warm with subtle rose undertone */
    --neutral-50: #FAF8F7;
    --neutral-100: #F3EFED;
    --neutral-200: #E8E2DE;
    --neutral-300: #D4CBC5;
    --neutral-400: #B0A59D;
    --neutral-500: #857A72;
    --neutral-600: #625850;
    --neutral-700: #423B36;
    --neutral-800: #2D2926;
    --neutral-900: #1C1A18;
    
    /* Semantic Colors */
    --success: #5AAE8C;
    --warning: #E4A853;
    --danger: #D46B5B;
    --info: #5B9BC4;
    
    /* Background & Surface */
    --bg-base: #FBF7F4;
    --bg-surface: #FEFCFA;
    --bg-elevated: #FFFFFF;
    
    /* Text */
    --text-primary: #423B36;
    --text-secondary: #857A72;
    --text-muted: #B0A59D;
    --text-inverse: #FAF8F7;
    
    /* Borders & Shadows */
    --border-light: #E8E2DE;
    --border-medium: #D4CBC5;
    --shadow-sm: 0 1px 2px rgba(45, 40, 36, 0.06);
    --shadow-md: 0 2px 6px rgba(45, 40, 36, 0.08);
    --shadow-lg: 0 4px 12px rgba(45, 40, 36, 0.10);
    --shadow-xl: 0 8px 24px rgba(45, 40, 36, 0.12);
    
    /* Primary shadow for buttons/FAB */
    --shadow-primary: 0 2px 6px rgba(217, 118, 89, 0.3);
    --shadow-primary-lg: 0 4px 12px rgba(217, 118, 89, 0.35);
    
    /* ==========================================
       SPACING SYSTEM - Compact Mobile
       ========================================== */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    
    /* ==========================================
       BORDER RADIUS - Tighter Corners
       ========================================== */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-full: 50%;
    
    /* ==========================================
       TYPOGRAPHY
       ========================================== */
    --font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --text-xs: 0.75rem;
    --text-sm: 0.8125rem;
    --text-base: 0.875rem;
    --text-lg: 1rem;
    --text-xl: 1.125rem;
    --text-2xl: 1.25rem;
    
    /* ==========================================
       TOUCH & INTERACTION
       ========================================== */
    --touch-min: 44px;
    
    /* ==========================================
       FAB (Floating Action Button)
       ========================================== */
    --fab-size: 52px;
    --fab-margin: 16px;
    
    /* ==========================================
       TRANSITIONS
       ========================================== */
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.3s ease;
}

/* ==========================================
   DARK MODE
   ========================================== */
[data-theme="dark"] {
    /* Primary - Soft Purple */
    --primary-50: #1E1B2E;
    --primary-100: #2A2640;
    --primary-200: #3D3860;
    --primary-300: #564F82;
    --primary-400: #7B72B3;
    --primary-500: #9D95CD;
    --primary-600: #B8B2DC;
    --primary-700: #D4D0EB;
    
    /* Accent - Muted Teal */
    --accent-400: #5A9590;
    --accent-500: #6BA8A2;
    --accent-600: #7DBAB4;
    
    /* Secondary - Soft Lavender */
    --secondary-400: #8B82B8;
    --secondary-500: #A59DC8;
    --secondary-600: #BFB8D8;
    
    /* Neutrals */
    --neutral-50: #E8E6EE;
    --neutral-100: #C8C5D4;
    --neutral-200: #9995A8;
    --neutral-300: #6B677A;
    --neutral-400: #4A475A;
    --neutral-500: #36334A;
    --neutral-600: #2A2840;
    --neutral-700: #1E1D30;
    --neutral-800: #151422;
    --neutral-900: #0D0C14;
    
    /* Semantic Colors - Muted */
    --success: #5A9E7D;
    --warning: #C9A05E;
    --danger: #B86E62;
    --info: #6A96B0;
    
    /* Background & Surface - Deep blacks with purple undertone */
    --bg-base: #0E0D14;
    --bg-surface: #16151F;
    --bg-elevated: #1E1D28;
    
    /* Text - Off-white */
    --text-primary: #E4E2EC;
    --text-secondary: #A09CAB;
    --text-muted: #6A6775;
    --text-inverse: #0E0D14;
    
    /* Borders - Purple-gray */
    --border-light: #2A283A;
    --border-medium: #3A3850;
    
    /* Shadows - Deeper */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.6);
    --shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.7);
    
    /* Primary shadow - Purple glow */
    --shadow-primary: 0 2px 8px rgba(123, 114, 179, 0.3);
    --shadow-primary-lg: 0 4px 16px rgba(123, 114, 179, 0.4);
}

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

html {
    font-size: 16px;
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-family);
    font-size: var(--text-base);
    line-height: 1.5;
    color: var(--text-primary);
    background: var(--bg-base);
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ==========================================
   BASE TYPOGRAPHY
   ========================================== */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-primary);
}

h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
h4 { font-size: var(--text-base); }

p {
    margin-bottom: var(--space-2);
}

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

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

/* ==========================================
   UTILITY CLASSES
   ========================================== */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-danger { color: var(--danger); }
.text-info { color: var(--info); }

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.font-medium { font-weight: 500; }
.font-normal { font-weight: 400; }

/* ==========================================
   LAYOUT CONTAINER
   ========================================== */
.container {
    padding: var(--space-3) 1px;
    padding-bottom: calc(var(--fab-size) + var(--fab-margin) * 2 + var(--space-4));
    max-width: 100%;
}