/**
 * CSS Variables — Golden Pitch Theme
 * betfair-uk.angelsfucked.com
 * Palette: Championship Gold (#F5C518) + Jet Black (#050508) + Electric Green (#00C853) + Pearl White (#F5F5F0)
 */

:root {
    /* PRIMARY — Championship Gold */
    --color-primary: #F5C518;
    --color-primary-dark: #D4A017;
    --color-primary-light: #FFD740;
    --color-primary-rgb: 245, 197, 24;

    /* SECONDARY — Jet Black */
    --color-secondary: #0D0D16;
    --color-secondary-dark: #050508;
    --color-secondary-light: #14141F;
    --color-secondary-rgb: 13, 13, 22;

    /* ACCENT — Electric Green */
    --color-accent: #00C853;
    --color-accent-dark: #00A846;
    --color-accent-light: #33D468;
    --color-accent-rgb: 0, 200, 83;

    /* BACKGROUNDS */
    --color-bg: #050508;
    --color-bg-dark: #020203;
    --color-bg-light: #0D0D16;
    --color-bg-card: #0B0B14;
    --color-bg-card2: #111120;
    --color-bg-header: rgba(5, 5, 8, 0.96);
    --color-bg-footer: #020203;

    /* TEXT */
    --color-text: #B8B8CC;
    --color-text-light: #7878A0;
    --color-text-muted: #55557A;
    --color-text-white: #F5F5F0;
    --color-text-accent: #F5C518;
    --color-text-heading: #F5F5F0;

    /* BORDERS */
    --color-border: #1A1A2E;
    --color-border-light: #242436;
    --color-border-accent: rgba(245, 197, 24, 0.25);

    /* GRADIENTS */
    --gradient-primary: linear-gradient(135deg, #F5C518 0%, #D4A017 100%);
    --gradient-accent: linear-gradient(135deg, #00C853 0%, #00A846 100%);
    --gradient-card: linear-gradient(135deg, #0B0B14 0%, #111120 100%);
    --gradient-hero: linear-gradient(180deg, rgba(5,5,8,0.15) 0%, rgba(5,5,8,0.65) 60%, rgba(5,5,8,0.95) 100%);
    --gradient-text: linear-gradient(90deg, #F5C518 0%, #FFD740 50%, #00C853 100%);

    /* SHADOWS */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.6);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.5);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.6);
    --shadow-xl: 0 16px 64px rgba(0,0,0,0.7);
    --shadow-card: 0 2px 8px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04);
    --shadow-card-hover: 0 8px 32px rgba(0,0,0,0.6), 0 0 0 1px rgba(245,197,24,0.2);
    --shadow-glow-primary: 0 0 24px rgba(245,197,24,0.35);
    --shadow-glow-accent: 0 0 24px rgba(0,200,83,0.35);

    /* TYPOGRAPHY */
    --font-main: 'Almarai', 'IBM Plex Sans Arabic', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body: 'IBM Plex Sans Arabic', 'Almarai', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    --font-thin: 100;
    --font-light: 300;
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;

    /* FONT SIZES */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-5xl: 3rem;
    --text-6xl: 3.75rem;

    /* LINE HEIGHTS */
    --leading-tight: 1.2;
    --leading-snug: 1.375;
    --leading-normal: 1.6;
    --leading-relaxed: 1.75;
    --leading-loose: 2;

    /* SPACING */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-4xl: 6rem;

    /* BORDER RADIUS */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 24px;
    --radius-full: 9999px;

    /* LAYOUT */
    --container-max: 1200px;
    --container-padding: 1.5rem;
    --header-height: 92px;

    /* Z-INDEX */
    --z-base: 1;
    --z-dropdown: 100;
    --z-fixed: 1000;
    --z-modal-backdrop: 1100;
    --z-modal: 1200;

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

    /* CAROUSEL */
    --carousel-speed-row1: 40s;
    --carousel-speed-row2: 55s;
    --carousel-speed-row3: 70s;

    /* STATUS */
    --color-success: #00C853;
    --color-error: #FF3D57;
    --color-warning: #F5C518;
    --color-info: #3B82F6;
}