/**
 * Pick One - CSS Variables
 */

:root {
    /* Colors */
    --po-bg: #0a0a0a;
    --po-surface: #141414;
    --po-surface-hover: #1f1f1f;
    --po-border: #2a2a2a;
    --po-text: #ffffff;
    --po-text-secondary: #a1a1a1;
    --po-text-muted: #666666;
    
    /* Card Type Colors */
    --po-comparacion-1: #FF4757;
    --po-comparacion-2: #FF6B81;
    --po-debate-1: #3742FA;
    --po-debate-2: #70A1FF;
    --po-relatable-1: #2ED573;
    --po-relatable-2: #7BED9F;
    --po-decision-1: #FFA502;
    --po-decision-2: #FFDA79;
    
    /* Gradients */
    --po-gradient-comparacion: linear-gradient(135deg, var(--po-comparacion-1) 0%, var(--po-comparacion-2) 100%);
    --po-gradient-debate: linear-gradient(135deg, var(--po-debate-1) 0%, var(--po-debate-2) 100%);
    --po-gradient-relatable: linear-gradient(135deg, var(--po-relatable-1) 0%, var(--po-relatable-2) 100%);
    --po-gradient-decision: linear-gradient(135deg, var(--po-decision-1) 0%, var(--po-decision-2) 100%);
    
    /* Achievement Tiers */
    --po-tier-bronce: #CD7F32;
    --po-tier-plata: #C0C0C0;
    --po-tier-oro: #FFD700;
    --po-tier-diamante: #B9F2FF;
    
    /* Spacing */
    --po-space-xs: 4px;
    --po-space-sm: 8px;
    --po-space-md: 16px;
    --po-space-lg: 24px;
    --po-space-xl: 32px;
    --po-space-2xl: 48px;
    
    /* Border Radius */
    --po-radius-sm: 8px;
    --po-radius-md: 12px;
    --po-radius-lg: 16px;
    --po-radius-xl: 24px;
    --po-radius-full: 9999px;
    
    /* Shadows */
    --po-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --po-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
    --po-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
    
    /* Typography */
    --po-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --po-font-size-xs: 11px;
    --po-font-size-sm: 13px;
    --po-font-size-md: 15px;
    --po-font-size-lg: 18px;
    --po-font-size-xl: 22px;
    --po-font-size-2xl: 28px;
    --po-font-size-3xl: 36px;
    
    /* Transitions */
    --po-transition-fast: 150ms ease;
    --po-transition: 250ms ease;
    --po-transition-slow: 400ms ease;
    
    /* Z-index */
    --po-z-header: 100;
    --po-z-nav: 100;
    --po-z-sheet: 200;
    --po-z-toast: 300;
    --po-z-popup: 400;
    
    /* Layout */
    --po-header-height: 60px;
    --po-nav-height: 70px;
    --po-max-width: 480px;
    
    /* Safe areas */
    --po-safe-top: env(safe-area-inset-top, 0px);
    --po-safe-bottom: env(safe-area-inset-bottom, 0px);
}