/* CSS Custom Properties (Variables) for BK8 Website - Modern Edition */

:root {
    /* Base font size for rem calculations
       100px makes 0.7rem = 70px, 0.16rem = 16px, etc. */
    font-size: 100px;

    /* ===== MODERN COLOR PALETTE ===== */

    /* Primary Colors - Vibrant Gold/Amber Gradient */
    --color-primary: hsl(35, 100%, 50%);
    /* #ff8a00 */
    --color-primary-hover: hsl(35, 100%, 55%);
    --color-primary-light: hsl(35, 100%, 60%);
    --color-primary-dark: hsl(35, 100%, 45%);

    /* Secondary Colors - Golden Yellow */
    --color-secondary: hsl(45, 95%, 54%);
    /* #fdb813 */
    --color-secondary-hover: hsl(45, 95%, 60%);

    /* Accent Colors - Rich Purple/Blue for depth */
    --color-accent-1: hsl(280, 70%, 55%);
    --color-accent-2: hsl(220, 80%, 55%);
    --color-accent-3: hsl(340, 75%, 55%);

    /* Base Colors */
    --color-white: #ffffff;
    --color-black: #000000;
    --color-text-dark: rgb(15, 22, 31);
    --color-text-light: #666666;
    --color-text-muted: #999999;
    --color-text-menu: rgb(68, 48, 24);
    --color-text-menu-active: hsl(35, 100%, 50%);

    /* Background Colors */
    --color-bg-light: #f5f5f5;
    --color-bg-dark: #1a1a1a;
    --color-bg-darker: #0f0f0f;
    --color-bg-lang-selector: #f3f5f6;
    --color-bg-card: rgba(255, 255, 255, 0.9);
    --color-bg-section: #fafbfc;

    /* Glassmorphism */
    --glass-bg: rgba(255, 255, 255, 0.1);
    --glass-bg-light: rgba(255, 255, 255, 0.15);
    --glass-bg-dark: rgba(0, 0, 0, 0.2);
    --glass-border: rgba(255, 255, 255, 0.2);
    --glass-blur: blur(10px);
    --glass-blur-heavy: blur(20px);

    /* ===== GRADIENTS ===== */

    /* Hero Gradients */
    --gradient-hero: linear-gradient(135deg,
            hsl(35, 100%, 50%) 0%,
            hsl(45, 95%, 54%) 100%);
    --gradient-hero-overlay: linear-gradient(135deg,
            rgba(0, 0, 0, 0.1) 0%,
            rgba(0, 0, 0, 0.2) 100%);
    --gradient-hero-dark: linear-gradient(180deg,
            rgba(0, 0, 0, 0.3) 0%,
            rgba(0, 0, 0, 0.6) 100%);

    /* Primary Button/CTA Gradient */
    --gradient-primary: linear-gradient(135deg,
            hsl(35, 100%, 50%) 0%,
            hsl(45, 95%, 54%) 100%);

    /* Card Gradients */
    --gradient-card: linear-gradient(135deg,
            rgba(255, 138, 0, 0.05) 0%,
            rgba(253, 184, 19, 0.1) 100%);
    --gradient-card-hover: linear-gradient(135deg,
            rgba(255, 138, 0, 0.1) 0%,
            rgba(253, 184, 19, 0.15) 100%);

    /* Text Gradients */
    --gradient-text-primary: linear-gradient(135deg,
            hsl(35, 100%, 50%) 0%,
            hsl(45, 95%, 54%) 100%);
    --gradient-text-accent: linear-gradient(135deg,
            hsl(280, 70%, 55%) 0%,
            hsl(220, 80%, 55%) 100%);

    /* Border Gradients */
    --gradient-border: linear-gradient(135deg,
            hsl(35, 100%, 50%) 0%,
            hsl(45, 95%, 54%) 100%);
    --gradient-border-glow: linear-gradient(135deg,
            rgba(255, 138, 0, 0.5) 0%,
            rgba(253, 184, 19, 0.5) 100%);

    /* Background Gradients */
    --gradient-bg-subtle: linear-gradient(180deg,
            #ffffff 0%,
            #fafbfc 100%);
    --gradient-bg-dark: linear-gradient(180deg,
            #1a1a1a 0%,
            #0f0f0f 100%);

    /* Header Colors */
    --color-header-bg: rgba(255, 255, 255, 0.8588235294);
    --color-header-blur: blur(0.06rem);
    --color-header-glass: rgba(255, 255, 255, 0.75);

    /* Button Colors */
    --color-btn-join: #ff8a00;
    --color-btn-join-hover: #ff9c1a;
    --color-btn-login: transparent;
    --color-btn-login-border: #ff8a00;
    --color-btn-login-text: #ff8a00;

    /* Carousel Arrow */
    --color-carousel-arrow-bg: #dbe9f0;
    --color-carousel-arrow-fill: #6da0dd;

    /* Slider Indicators */
    --color-indicator-inactive: #ffffff;
    --color-indicator-active: #fdb813;

    /* ===== SPACING ===== */
    --spacing-xxxs: 0.02rem;
    /* 2px */
    --spacing-xxs: 0.04rem;
    /* 4px */
    --spacing-micro: 0.06rem;
    /* 6px */
    --spacing-xs: 0.05rem;
    /* 5px */
    --spacing-xs-2: 0.08rem;
    /* 8px */
    --spacing-sm: 0.1rem;
    /* 10px */
    --spacing-custom: 0.12rem;
    /* 12px */
    --spacing-md: 0.15rem;
    /* 15px */
    --spacing-lg: 0.2rem;
    /* 20px */
    --spacing-xl: 0.3rem;
    /* 30px */
    --spacing-2xl: 0.38rem;
    /* 38px */
    --spacing-3xl: 0.5rem;
    /* 50px */
    --spacing-4xl: 0.7rem;
    /* 70px */

    /* Header Dimensions */
    --header-height: 0.7rem;
    /* 70px */
    --header-padding-x: 0.2rem;
    /* 20px */
    --logo-width: 1.4284rem;
    /* 142.84px */
    --logo-height: 0.4rem;
    /* 40px */

    /* Hero Banner */
    --hero-height: 5.25rem;
    /* 525px */

    /* Carousel */
    --carousel-max-width: 13.4rem;
    /* 1340px */
    --carousel-arrow-size: 0.28rem;
    /* 28px */

    /* ===== TYPOGRAPHY ===== */

    /* Font Families */
    --font-family-primary: 'Inter', 'avertaStd-Regular', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-family-headings: 'Inter', 'avertaStd-Regular', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Font Sizes */
    --font-size-xxxs: 0.11rem;
    /* 11px */
    --font-size-xxs: 0.1rem;
    /* 10px */
    --font-size-xs: 0.12rem;
    /* 12px */
    --font-size-sm: 0.14rem;
    /* 14px */
    --font-size-md: 0.15rem;
    /* 15px */
    --font-size-base: 0.16rem;
    /* 16px */
    --font-size-lg: 0.18rem;
    /* 18px */
    --font-size-xl: 0.2rem;
    /* 20px */
    --font-size-2xl: 0.24rem;
    /* 24px */
    --font-size-3xl: 0.3rem;
    /* 30px */
    --font-size-4xl: 0.36rem;
    /* 36px */
    --font-size-hero: 0.42rem;
    /* 42px */

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

    /* Line Heights */
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    /* ===== BORDER RADIUS ===== */
    --border-radius-sm: 0.05rem;
    /* 5px */
    --border-radius-md: 0.1rem;
    /* 10px */
    --border-radius-lg: 0.15rem;
    /* 15px */
    --border-radius-xl: 0.2rem;
    /* 20px */
    --border-radius-2xl: 0.25rem;
    /* 25px */
    --border-radius-full: 50%;

    /* ===== SHADOWS ===== */

    /* Elevation Shadows */
    --shadow-xs: 0 0.01rem 0.02rem rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 0.02rem 0.04rem rgba(0, 0, 0, 0.08);
    --shadow-md: 0 0.04rem 0.08rem rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 0.08rem 0.16rem rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 0.12rem 0.24rem rgba(0, 0, 0, 0.18);
    --shadow-2xl: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.22);

    /* Colored Shadows */
    --shadow-primary: 0 0.08rem 0.24rem rgba(255, 138, 0, 0.3);
    --shadow-primary-lg: 0 0.12rem 0.3rem rgba(255, 138, 0, 0.4);
    --shadow-glow: 0 0 0.2rem rgba(255, 138, 0, 0.5);
    --shadow-glow-lg: 0 0 0.4rem rgba(255, 138, 0, 0.6);

    /* Inner Shadows */
    --shadow-inner: inset 0 0.02rem 0.04rem rgba(0, 0, 0, 0.06);

    /* ===== TRANSITIONS ===== */

    /* Duration */
    --transition-fast: 0.15s;
    --transition-medium: 0.3s;
    --transition-slow: 0.5s;
    --transition-slower: 0.7s;

    /* Easing Functions */
    --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
    --ease-in-out-back: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --ease-bounce: cubic-bezier(0.68, -0.6, 0.32, 1.6);
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);

    /* Combined Transitions */
    --transition-transform: transform var(--transition-medium) var(--ease-out-expo);
    --transition-all-smooth: all var(--transition-medium) var(--ease-smooth);
    --transition-all-fast: all var(--transition-fast) var(--ease-smooth);

    /* ===== Z-INDEX LAYERS ===== */
    --z-base: 1;
    --z-dropdown: 5;
    --z-header: 10;
    --z-overlay: 15;
    --z-mobile-menu: 20;
    --z-modal: 30;
    --z-tooltip: 40;
    --z-notification: 50;

    /* ===== CONTENT WIDTH ===== */
    --content-max-width: 13.4rem;
    /* 1340px */

    /* ===== EFFECTS ===== */

    /* Backdrop Blur */
    --backdrop-blur-sm: blur(4px);
    --backdrop-blur-md: blur(8px);
    --backdrop-blur-lg: blur(12px);
    --backdrop-blur-xl: blur(20px);

    /* Transform Scales */
    --scale-hover: 1.05;
    --scale-active: 0.98;
    --scale-card-hover: 1.03;
}

/* ===== RESPONSIVE ADJUSTMENTS ===== */

@media (max-width: 1440px) {
    :root {
        font-size: 100px;
        /* Increased from 90px for better readability */
    }
}

@media (max-width: 1200px) {
    :root {
        font-size: 95px;
        /* Increased from 80px for better readability */
    }
}

@media (max-width: 992px) {
    :root {
        font-size: 90px;
        /* Increased from 70px for better readability */
    }
}

@media (max-width: 768px) {
    :root {
        font-size: 85px;

        /* Adjust spacing for mobile */
        --spacing-xl: 0.25rem;
        --spacing-2xl: 0.3rem;
        --spacing-3xl: 0.4rem;
    }
}

@media (max-width: 480px) {
    :root {
        font-size: 80px;
    }
}

/* ===== PREFERS REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-fast: 0.01s;
        --transition-medium: 0.01s;
        --transition-slow: 0.01s;
        --transition-slower: 0.01s;
    }
}