/* ========================================
   CSS Custom Properties (Variables)
   ======================================== */

:root {
    /* Color Palette */
    --color-primary: #0a0a0a;
    --color-secondary: #1a1a1a;
    --color-tertiary: #2a2a2a;
    --color-accent: #3a3a3a;

    --color-white: #ffffff;
    --color-off-white: #e8e8e8;
    --color-light-gray: #f5f5f5;
    --color-border: #e0e0e0;

    --color-text-primary: #000000;
    --color-text-secondary: #666666;
    --color-text-tertiary: #999999;
    --color-text-light: #ffffff;

    --color-error: #dc2626;
    --color-error-hover: #b91c1c;
    --color-success: #22c55e;
    --color-warning: #f59e0b;

    /* Gradient Colors */
    --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --gradient-accent: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);

    /* Gold/Rating Colors */
    --color-gold: #FFD700;

    /* Spacing Scale */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 20px;
    --spacing-2xl: 24px;
    --spacing-3xl: 30px;
    --spacing-4xl: 40px;
    --spacing-5xl: 60px;
    --spacing-6xl: 80px;

    /* Border Radius */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 50%;

    /* Font Families */
    --font-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Font Sizes */
    --font-size-xs: 11px;
    --font-size-sm: 12px;
    --font-size-base: 13px;
    --font-size-md: 14px;
    --font-size-lg: 15px;
    --font-size-xl: 16px;
    --font-size-2xl: 18px;
    --font-size-3xl: 20px;
    --font-size-4xl: 24px;
    --font-size-5xl: 28px;
    --font-size-6xl: 32px;
    --font-size-7xl: 36px;
    --font-size-8xl: 48px;
    --font-size-9xl: 64px;
    --font-size-10xl: 96px;

    /* Font Weights */
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Letter Spacing */
    --letter-spacing-tight: -3px;
    --letter-spacing-normal: -1px;
    --letter-spacing-medium: -0.5px;
    --letter-spacing-wide: 0.5px;

    /* Line Heights */
    --line-height-tight: 1;
    --line-height-normal: 1.6;
    --line-height-relaxed: 1.8;

    /* Shadows */
    --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 10px 40px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.3);

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* Z-Index Layers */
    --z-base: 1;
    --z-dropdown: 10;
    --z-sticky: 100;
    --z-modal: 1000;
    --z-tooltip: 2000;

    /* Layout Widths */
    --container-max-width: 1400px;
    --sidebar-width: 280px;
    --card-max-width: 500px;

    /* Component Sizes */
    --avatar-sm: 40px;
    --avatar-md: 50px;
    --avatar-lg: 60px;

    --icon-sm: 18px;
    --icon-md: 20px;
    --icon-lg: 24px;

    --button-height-sm: 36px;
    --button-height-md: 44px;
    --button-height-lg: 52px;

    /* Opacity Levels */
    --opacity-disabled: 0.5;
    --opacity-hover: 0.6;
    --opacity-active: 0.8;

    /* Overlay Background */
    --overlay-bg: rgba(0, 0, 0, 0.5);
}