/* =============================================================================
   NEUMORPHIC DESIGN SYSTEM - DESIGN TOKENS
   Based on: docs/design-reference/podsun-neumorphic-complete.html
   Documentation: docs/design-system/
   ============================================================================= */

:root {
    /* ===== Background Colors ===== */
    --color-bg: #ECF0F3;
    --color-bg-light: #FFFFFF;
    --color-bg-dark: #D1D9E6;
    --color-surface: #ECF0F3;  /* Same as bg for neumorphic design */
    
    /* ===== Primary Colors (Coral/Red Accent) ===== */
    --color-primary: #FF6B6B;
    --color-primary-light: #FFEBEB;  /* Light background for primary selections */
    --color-primary-dark: #FF5252;
    --color-primary-gradient: linear-gradient(145deg, #FF7B7B, #FF5B5B);
    
    /* ===== Success Colors ===== */
    --color-success: #4FC964;
    --color-success-light: #5FCF7F;
    --color-success-gradient: linear-gradient(145deg, #5FCF7F, #4FC964);
    
    /* ===== Warning Colors ===== */
    --color-warning: #F6E05E;
    --color-warning-light: #FEF5E7;
    --color-warning-dark: #744210;
    
    /* ===== Text Colors ===== */
    --color-text-primary: #5A6C7D;
    --color-text-secondary: #6C7A89;
    --color-text-muted: #9BA8B5;
    --color-text-disabled: #C5CDD5;
    --color-text-placeholder: #B5BFC9;
    
    /* ===== Neumorphic Shadows (Raised/Flat) ===== */
    --shadow-flat: 18px 18px 30px #D1D9E6, -18px -18px 30px #FFFFFF;
    --shadow-flat-sm: 8px 8px 16px #D1D9E6, -8px -8px 16px #FFFFFF;
    --shadow-flat-xs: 6px 6px 12px #D1D9E6, -6px -6px 12px #FFFFFF;
    --shadow-flat-tiny: 3px 3px 6px #D1D9E6, -3px -3px 6px #FFFFFF;
    
    /* ===== Hover Shadows (Enhanced Elevation) ===== */
    --shadow-hover: 20px 20px 35px #D1D9E6, -20px -20px 35px #FFFFFF;
    --shadow-hover-sm: 10px 10px 20px #D1D9E6, -10px -10px 20px #FFFFFF;
    
    /* ===== Pressed/Inset Shadows (Concave) ===== */
    --shadow-pressed: inset 8px 8px 16px #D1D9E6, inset -8px -8px 16px #FFFFFF;
    --shadow-pressed-sm: inset 4px 4px 8px #D1D9E6, inset -4px -4px 8px #FFFFFF;
    --shadow-pressed-xs: inset 3px 3px 6px #D1D9E6, inset -3px -3px 6px #FFFFFF;
    --shadow-pressed-tiny: inset 2px 2px 4px #D1D9E6, inset -2px -2px 4px #FFFFFF;
    
    /* ===== Tailwind-style Shadow Aliases ===== */
    --shadow-sm: 8px 8px 16px #D1D9E6, -8px -8px 16px #FFFFFF;
    --shadow-md: 18px 18px 30px #D1D9E6, -18px -18px 30px #FFFFFF;
    --shadow-lg: 18px 18px 30px #D1D9E6, -18px -18px 30px #FFFFFF;
    --shadow-inset: inset 4px 4px 8px #D1D9E6, inset -4px -4px 8px #FFFFFF;
    --shadow-inset-lg: inset 8px 8px 16px #D1D9E6, inset -8px -8px 16px #FFFFFF;
    --shadow-inset-active: inset 3px 3px 6px #D1D9E6, inset -3px -3px 6px #FFFFFF, 0 0 0 3px rgba(255, 107, 107, 0.5);
    
    /* ===== Spacing Scale (4px increments) ===== */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 20px;
    --spacing-2xl: 24px;
    --spacing-3xl: 32px;
    
    /* ===== Border Radius ===== */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 14px;
    --radius-2xl: 16px;
    --radius-3xl: 20px;
    --radius-pill: 50px;
    --radius-full: 50%;
    
    /* ===== Transitions ===== */
    --transition-fast: all 0.2s ease;
    --transition-base: all 0.3s ease;
    --transition-slow: all 0.4s ease;
    --transition-smooth: all 0.5s ease-in-out;
    
    /* ===== Typography ===== */
    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    
    --font-size-h1: 32px;
    --font-size-h2: 24px;
    --font-size-h3: 20px;
    --font-size-h4: 18px;
    --font-size-body: 14px;
    --font-size-small: 12px;
    --font-size-label: 11px;
    --font-size-tiny: 10px;
    
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    --line-height-tight: 1.2;
    --line-height-snug: 1.3;
    --line-height-normal: 1.4;
    --line-height-relaxed: 1.5;
    
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.5px;
    
    /* ===== Text Shadow (Neumorphic) ===== */
    --text-shadow-heading: 2px 2px 4px rgba(255,255,255,0.8), -2px -2px 4px rgba(0,0,0,0.08);
}