/* ========================================
   CSS Variables - Modern Borderless Theme
======================================== */
:root {
    /* Brand colors */
    --brand-primary: #F5B800;
    --brand-primary-hover: #D4A000;
    --brand-primary-glow: rgba(245, 184, 0, 0.4);
    --brand-gradient: linear-gradient(135deg, #f5b800 0%, #ffd24d 100%);
    
    /* Light theme backgrounds - layered surfaces */
    --bg-base: #f8fafc;
    --bg-primary: #ffffff;
    --bg-secondary: #f1f5f9;
    --bg-elevated: #ffffff;
    --bg-hover: rgba(0, 0, 0, 0.04);
    --bg-active: rgba(0, 0, 0, 0.06);
    --bg-panel: rgba(255, 255, 255, 0.82);
    --bg-glass: rgba(255, 255, 255, 0.72);
    --bg-inset: rgba(15, 23, 42, 0.04);
    
    /* Text hierarchy */
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-tertiary: #94a3b8;
    --text-placeholder: #94a3b8;
    --text-quaternary: #cbd5e1;
    
    /* Accent - bright gold (same as dark theme for brand consistency) */
    --accent: #F5B800;
    --accent-hover: #D4A000;
    --accent-subtle: rgba(245, 184, 0, 0.12);
    --accent-text: #000000;
    --accent-ring: rgba(245, 184, 0, 0.24);
    
    /* Functional colors */
    --destructive: #ef4444;
    --destructive-subtle: rgba(239, 68, 68, 0.1);
    --success: #22c55e;
    --success-subtle: rgba(34, 197, 94, 0.1);

    /* Borders */
    --border-subtle: rgba(15, 23, 42, 0.08);
    --border-default: rgba(15, 23, 42, 0.12);
    --border-strong: rgba(15, 23, 42, 0.18);
    
    /* Shadows - soft, layered for depth */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.03);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.06);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.08);
    --shadow-glow: 0 0 40px rgba(245, 184, 0, 0.15);
    --shadow-panel: 0 20px 40px rgba(15, 23, 42, 0.08);
    --shadow-floating: 0 24px 64px rgba(15, 23, 42, 0.12);
    
    /* Spacing scale */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    
    /* Border radius - smooth, generous */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-2xl: 28px;
    --radius-full: 9999px;
    
    /* Transitions - smooth */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-spring: 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* ========================================
   Dark Theme - Seamless Surfaces
======================================== */
[data-theme="dark"] {
    /* Layered dark backgrounds */
    --bg-base: #030712;
    --bg-primary: #08101d;
    --bg-secondary: #101a2d;
    --bg-elevated: #172338;
    --bg-hover: rgba(255, 255, 255, 0.04);
    --bg-active: rgba(255, 255, 255, 0.08);
    --bg-panel: rgba(12, 20, 34, 0.88);
    --bg-glass: rgba(11, 19, 31, 0.72);
    --bg-inset: rgba(255, 255, 255, 0.035);
    
    /* Text */
    --text-primary: #f8fafc;
    --text-secondary: #a8b6ca;
    --text-tertiary: #71829b;
    --text-placeholder: #52637d;
    --text-quaternary: rgba(226, 232, 240, 0.4);
    
    /* Accent - golden */
    --accent: #F5B800;
    --accent-hover: #ffc520;
    --accent-subtle: rgba(245, 184, 0, 0.12);
    --accent-text: #000000;
    --accent-ring: rgba(245, 184, 0, 0.28);

    /* Borders */
    --border-subtle: rgba(255, 255, 255, 0.06);
    --border-default: rgba(255, 255, 255, 0.09);
    --border-strong: rgba(255, 255, 255, 0.14);
    
    /* Enhanced shadows for dark mode */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 16px 64px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 60px rgba(245, 184, 0, 0.2);
    --shadow-panel: 0 24px 60px rgba(0, 0, 0, 0.42);
    --shadow-floating: 0 30px 80px rgba(0, 0, 0, 0.52);
}