/* ============================================
   CSS CUSTOM PROPERTIES (VARIABLES)
   Centralized design tokens to reduce duplication
   ============================================ */

:root {
    /* === PRIMARY COLORS === */
    --color-primary: #667eea;
    --color-primary-dark: #764ba2;
    --color-secondary: #6c757d;
    --color-text-primary: #2d3748;
    --color-text-muted: #6c757d;
    --color-white: #ffffff;
    --color-black: #000000;

    /* === STATUS COLORS === */
    --color-success: #10b981;
    --color-success-dark: #059669;
    --color-danger: #dc3545;
    --color-danger-dark: #c82333;
    --color-warning: #ffc107;
    --color-warning-dark: #ff8c00;
    --color-info: #0dcaf0;

    /* === SOCIAL COLORS === */
    --color-twitter: #1DA1F2;
    --color-linkedin: #0077B5;
    --color-instagram: #E1306C;
    --color-youtube: #FF0000;

    /* === BACKGROUND COLORS === */
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-tertiary: #e9ecef;
    --bg-light: #f8f9fa;
    --bg-dark: #212529;

    /* === BORDER RADIUS === */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-base: 10px;
    --radius-lg: 12px;
    --radius-xl: 15px;
    --radius-2xl: 20px;
    --radius-3xl: 24px;
    --radius-circle: 50%;
    --radius-pill: 50px;

    /* === SPACING === */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 2.5rem;
    --spacing-3xl: 3rem;
    --spacing-4xl: 4rem;

    /* === PADDING PRESETS === */
    --padding-card: 1.5rem;
    --padding-section: 3rem 2rem;
    --padding-section-lg: 4rem 2rem;
    --padding-btn: 0.75rem 1.5rem;
    --padding-btn-sm: 0.5rem 1rem;
    --padding-btn-lg: 1rem 2rem;

    /* === SHADOWS === */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
    --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.25);

    /* === SPECIALIZED SHADOWS === */
    --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.04);
    --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.06);
    --shadow-card-dark: 0 4px 20px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.2);
    --shadow-primary: 0 20px 40px rgba(102, 126, 234, 0.15), 0 10px 20px rgba(102, 126, 234, 0.1);
    --shadow-primary-lg: 0 24px 48px rgba(102, 126, 234, 0.15), 0 12px 24px rgba(102, 126, 234, 0.1);

    /* === TRANSITIONS === */
    --transition-fast: all 0.15s ease-in-out;
    --transition-base: all 0.3s ease-in-out;
    --transition-slow: all 0.5s ease-in-out;
    --transition-transform: transform 0.3s ease-in-out;
    --transition-opacity: opacity 0.3s ease-in-out;
    --transition-colors: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;

    /* === GRADIENTS === */
    --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --gradient-primary-reverse: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
    --gradient-light: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    --gradient-subtle: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    --gradient-gold: linear-gradient(135deg, #ffd700 0%, #ffed4a 100%);
    --gradient-gold-alt: linear-gradient(135deg, #ffd700, #ffa500 100%);
    --gradient-success: linear-gradient(135deg, #10b981 0%, #059669 100%);
    --gradient-success-alt: linear-gradient(135deg, #51cf66, #37b24d);
    --gradient-danger: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    --gradient-danger-alt: linear-gradient(135deg, #ff6b6b, #ee5a6f);
    --gradient-featured: linear-gradient(135deg, #fff8dc 0%, #fffaed 100%);
    --gradient-purple: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    --gradient-teal: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    --gradient-blue: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    --gradient-sunset: linear-gradient(135deg, #fa709a 0%, #fee140 100%);

    /* === TYPOGRAPHY === */
    --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    --font-size-5xl: 3rem;

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    /* === Z-INDEX SCALE === */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    --z-notification: 1080;

    /* === BREAKPOINTS (for JS) === */
    --breakpoint-xs: 0px;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --breakpoint-xxl: 1400px;

    /* === OPACITY === */
    --opacity-disabled: 0.5;
    --opacity-hover: 0.8;
    --opacity-overlay: 0.5;
    --opacity-overlay-dark: 0.7;

    /* === BORDERS === */
    --border-width: 1px;
    --border-width-thick: 2px;
    --border-color: rgba(0, 0, 0, 0.125);
    --border-color-light: #dee2e6;

    /* === CONTAINER WIDTHS === */
    --container-sm: 540px;
    --container-md: 720px;
    --container-lg: 960px;
    --container-xl: 1140px;
    --container-xxl: 1320px;
}

/* === DARK THEME VARIABLES === */
[data-theme="dark"] {
    --bg-primary: #1a1a2e;
    --bg-secondary: #16213e;
    --bg-tertiary: #0f1419;
    --bg-light: #2d3748;
    --bg-dark: #0a0e14;

    --color-text-primary: #e2e8f0;
    --color-text-muted: #a0aec0;

    --border-color: rgba(255, 255, 255, 0.125);
    --border-color-light: #2d3748;

    --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* === UTILITY CLASSES USING VARIABLES === */

/* Colors */
.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.text-muted { color: var(--color-text-muted); }
.text-success { color: var(--color-success); }
.text-danger { color: var(--color-danger); }
.text-warning { color: var(--color-warning); }

.bg-primary { background-color: var(--bg-primary); }
.bg-secondary { background-color: var(--bg-secondary); }
.bg-light { background-color: var(--bg-light); }

/* Gradients */
.gradient-primary { background: var(--gradient-primary); }
.gradient-light { background: var(--gradient-light); }
.gradient-gold { background: var(--gradient-gold); }

/* Shadows */
.shadow-card { box-shadow: var(--shadow-card); }
.shadow-primary { box-shadow: var(--shadow-primary); }

/* Border Radius */
.rounded-base { border-radius: var(--radius-base); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-2xl { border-radius: var(--radius-2xl); }
.rounded-circle { border-radius: var(--radius-circle); }

/* Transitions */
.transition { transition: var(--transition-base); }
.transition-fast { transition: var(--transition-fast); }