/* ==========================================================================
   Design System Variables & Color Tokens - Xinh Social App
   ========================================================================== */

:root {
    /* Brand Colors & Gradients */
    --primary: #FF2D55;
    --primary-hover: #E02449;
    --primary-light: rgba(255, 45, 85, 0.12);
    --primary-glow: rgba(255, 45, 85, 0.35);
    
    --secondary: #6366F1;
    --secondary-hover: #4F46E5;
    --secondary-light: rgba(99, 102, 241, 0.12);
    
    --accent: #FF375F;
    --like: #FF2D55;
    --success: #10B981;
    --warning: #F59E0B;
    --info: #06B6D4;
    
    /* Vibrant Gradients */
    --gradient-primary: linear-gradient(135deg, #FF2D55 0%, #FF5177 45%, #FF7A00 100%);
    --gradient-primary-hover: linear-gradient(135deg, #E02449 0%, #E64268 45%, #E66C00 100%);
    --gradient-accent: linear-gradient(135deg, #6366F1 0%, #8B5CF6 50%, #EC4899 100%);
    --gradient-story: conic-gradient(from 0deg, #F58529, #DD2A7B, #8134AF, #515BD4, #F58529);
    --gradient-glow: linear-gradient(135deg, rgba(255, 45, 85, 0.4), rgba(99, 102, 241, 0.4));
    --gradient-card-overlay: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.85) 100%);

    /* Light Theme (Default) */
    --bg-main: #F4F6FB;
    --bg-surface: #FFFFFF;
    --bg-surface-hover: #F0F3F8;
    --bg-surface-active: #E8EDF5;
    --bg-input: #EDF1F7;
    --bg-input-focus: #FFFFFF;
    --bg-glass: rgba(255, 255, 255, 0.88);
    --bg-glass-card: rgba(255, 255, 255, 0.95);
    
    --text-main: #0F172A;
    --text-muted: #64748B;
    --text-subtle: #94A3B8;
    
    --border-color: rgba(0, 0, 0, 0.08);
    --border-subtle: rgba(0, 0, 0, 0.04);
    --border-focus: #FF2D55;
    
    /* Shadows with Natural Ambient Depth */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.03);
    --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.05);
    --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.12);
    --shadow-glow: 0 0 24px rgba(255, 45, 85, 0.28);
    --shadow-glow-accent: 0 0 24px rgba(99, 102, 241, 0.28);

    /* Dimensions & Spacing */
    --sidebar-width: 260px;
    --sidebar-collapsed-width: 76px;
    --right-panel-width: 330px;
    --bottom-nav-height: 62px;
    --header-height: 56px;
    
    --radius-xs: 6px;
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --radius-full: 9999px;

    /* Typography & Transitions */
    --font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-display: 'Outfit', 'Plus Jakarta Sans', -apple-system, sans-serif;
    
    --transition-fast: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-spring: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Dark Theme - High Performance OLED Aesthetic */
[data-theme="dark"] {
    --bg-main: #0B0E14;
    --bg-surface: #141821;
    --bg-surface-hover: #1D2330;
    --bg-surface-active: #252D3D;
    --bg-input: #1B212D;
    --bg-input-focus: #141821;
    --bg-glass: rgba(20, 24, 33, 0.88);
    --bg-glass-card: rgba(20, 24, 33, 0.95);
    
    --text-main: #F8FAFC;
    --text-muted: #94A3B8;
    --text-subtle: #64748B;
    
    --border-color: rgba(255, 255, 255, 0.08);
    --border-subtle: rgba(255, 255, 255, 0.04);
    --border-focus: #FF5177;
    
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.55);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.75);
    --shadow-glow: 0 0 28px rgba(255, 45, 85, 0.35);
    --shadow-glow-accent: 0 0 28px rgba(99, 102, 241, 0.35);
}