/* ==================== DESIGN SYSTEM PREMIUM ==================== */
/* Inspirado em Instagram, Twitter, LinkedIn */

:root {
    /* ==================== CORES PREMIUM ==================== */
    /* Primary - Roxo vibrante */
    --color-primary: #6D00FF;
    --color-primary-dark: #5500CC;
    --color-primary-light: #8A33FF;
    --color-primary-lighter: #A366FF;
    --color-primary-alpha-10: rgba(109, 0, 255, 0.1);
    --color-primary-alpha-20: rgba(109, 0, 255, 0.2);
    
    /* Neutros - Escala cinza moderna */
    --color-black: #000000;
    --color-gray-900: #111111;
    --color-gray-800: #1A1A1A;
    --color-gray-700: #2A2A2A;
    --color-gray-600: #4A4A4A;
    --color-gray-500: #6A6A6A;
    --color-gray-400: #9A9A9A;
    --color-gray-300: #CACACA;
    --color-gray-200: #E5E5E5;
    --color-gray-100: #F5F5F5;
    --color-gray-50: #FAFAFA;
    --color-white: #FFFFFF;
    
    /* Superfícies */
    --surface-primary: #FFFFFF;
    --surface-secondary: #FAFAFA;
    --surface-tertiary: #F5F5F5;
    --surface-elevated: #FFFFFF;
    --surface-overlay: rgba(0, 0, 0, 0.4);
    
    /* Bordas */
    --border-color: #E5E5E5;
    --border-color-dark: #CACACA;
    --border-color-light: #F5F5F5;
    
    /* Texto */
    --text-primary: #111111;
    --text-secondary: #6A6A6A;
    --text-tertiary: #9A9A9A;
    --text-inverse: #FFFFFF;
    --text-link: #6D00FF;
    
    /* Status Colors */
    --color-success: #00C853;
    --color-success-light: #B9F6CA;
    --color-error: #FF3B30;
    --color-error-light: #FFCDD2;
    --color-warning: #FF9500;
    --color-warning-light: #FFE0B2;
    --color-info: #007AFF;
    --color-info-light: #BBDEFB;
    
    /* Reações */
    --color-like: #FF3B30;
    --color-love: #FF2D55;
    --color-celebrate: #FFD60A;
    
    /* ==================== TIPOGRAFIA PREMIUM ==================== */
    /* System Font Stack - nativo de cada plataforma */
    --font-primary: 'Noto Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    
    /* Font Sizes - Escala modular */
    --font-size-xs: 11px;
    --font-size-sm: 13px;
    --font-size-base: 15px;
    --font-size-md: 17px;
    --font-size-lg: 20px;
    --font-size-xl: 24px;
    --font-size-2xl: 28px;
    --font-size-3xl: 34px;
    --font-size-4xl: 40px;
    
    /* Font Weights */
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 600;
    
    /* Line Heights */
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.6;
    
    /* Letter Spacing */
    --letter-spacing-tight: -0.02em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.02em;
    --letter-spacing-sdk-tag: 3px;
    
    /* ==================== ESPAÇAMENTOS - 4px BASE ==================== */
    --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;
    --space-16: 64px;
    --space-20: 80px;
    
    /* ==================== BORDER RADIUS ==================== */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 18px;
    --radius-2xl: 22px;
    --radius-3xl: 28px;
    --radius-full: 9999px;
    
    /* ==================== SOMBRAS PREMIUM ==================== */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.16);
    --shadow-2xl: 0 16px 48px rgba(0, 0, 0, 0.20);
    
    /* Sombras coloridas */
    --shadow-primary: 0 4px 16px rgba(109, 0, 255, 0.24);
    --shadow-primary-lg: 0 8px 32px rgba(109, 0, 255, 0.32);
    
    /* ==================== Z-INDEX ==================== */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    
    /* ==================== TRANSIÇÕES ==================== */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slower: 500ms cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Easing functions */
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0.0, 0, 0.2, 1);
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
    /* ==================== DIMENSÕES ==================== */
    /* Touch targets */
    --touch-target: 44px;
    --touch-target-sm: 36px;
    --touch-target-lg: 56px;
    
    /* Containers */
    --container-xs: 480px;
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1280px;
    --container-2xl: 1536px;
    
    /* Feed widths */
    --feed-width-mobile: 100%;
    --feed-width-tablet: 600px;
    --feed-width-desktop: 600px;
    
    /* Sidebar */
    --sidebar-width: 280px;
    --sidebar-width-collapsed: 72px;
    
    /* Header */
    --header-height-mobile: 56px;
    --header-height-desktop: 64px;
    
    /* ==================== BREAKPOINTS ==================== */
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-2xl: 1536px;
}

/* ==================== DARK MODE ==================== */
[data-theme="dark"] {
    --surface-primary: #1e1e1e;
    --surface-secondary: #252545;
    --surface-tertiary: #1a1a2e;
    --text-primary: #e0e0e0;
    --text-secondary: #a0a0a0;
    --text-tertiary: #666666;
    --border-color: #3a3a5c;
    --border-color-light: #333;
}

/* Border-radius controlado por variáveis CSS (--radius-*) */