/**
 * Bali Green Spa - Master CSS Variables
 * Centralized design tokens for entire theme
 * Updated with accessibility improvements
 *
 * @package Bali Green Spa
 * @since 1.0.0
 */

:root {
    /* ========================================
       BASE COLOR PALETTE
       ======================================== */

    /* Greens */
    --bali-green-950: #1a3009;
    --bali-green-900: #2d5016;
    --bali-green-700: #379237;
    --bali-green-500: #4a7c59;
    --bali-green-300: #9FDD48;
    --bali-green-100: #e8f5e8;
    --bali-green-50: #f8fffe;
    --bali-green-card: #EDFBE2;

    /* Grays */
    --bali-gray-900: #333333;
    --bali-gray-700: #666666;
    --bali-gray-500: #999999;
    --bali-gray-300: #bbbbbb;
    --bali-gray-100: #f1f1f1;
    --bali-gray-50: #f9f9f9;

    /* Pure colors */
    --bali-white: #ffffff;
    --bali-black: #000000;

    /* Alert/Status colors */
    --bali-red: #e74c3c;
    --bali-red-dark: #c0392b;
    --bali-yellow: #fff3cd;
    --bali-yellow-dark: #856404;

    /* ========================================
       SEMANTIC COLORS
       ======================================== */

    --bali-primary: var(--bali-green-900);
    --bali-secondary: var(--bali-green-500);
    --bali-accent: var(--bali-green-300);

    --bali-btn-primary: var(--bali-red-dark);
    --bali-btn-secondary: var(--bali-red-dark);
    --bali-btn-accent: var(--bali-green-300);

    --bali-text-primary: var(--bali-gray-900);
    --bali-text-secondary: var(--bali-gray-700);
    --bali-text-muted: var(--bali-gray-500);
    --bali-text-inverse: var(--bali-white);

    --bali-bg-page: var(--bali-white);
    --bali-bg-surface: var(--bali-white);
    --bali-bg-subtle: var(--bali-green-50);
    --bali-bg-card: var(--bali-green-card);
    --bali-bg-accent: var(--bali-green-100);

    --bali-border-light: var(--bali-green-100);
    --bali-border-medium: var(--bali-green-300);
    --bali-border-strong: var(--bali-green-500);

    --bali-hover-bg: var(--bali-green-100);
    --bali-active-bg: var(--bali-green-50);
    --bali-focus-outline: var(--bali-secondary);

    --bali-success: var(--bali-green-500);
    --bali-error: var(--bali-red);
    --bali-warning: var(--bali-yellow-dark);

    /* ========================================
       TRANSPARENT/OVERLAY COLORS
       ======================================== */

    --bali-overlay-dark: rgba(45, 80, 22, 0.7);
    --bali-overlay-medium: rgba(55, 146, 55, 0.95);
    --bali-overlay-light: rgba(55, 146, 55, 0.3);
    --bali-overlay-white: rgba(255, 255, 255, 0.95);
    --bali-overlay-black: rgba(0, 0, 0, 0.5);

    /* ========================================
       HEADER-SPECIFIC VARIABLES
       Updated for better accessibility
       ======================================== */

    /* Header backgrounds - transparent at first, opaque when scrolled */
    --bali-header-bg-transparent: rgba(45, 80, 22, 0);      /* Semi-transparent dark green */
    --bali-header-bg-scrolled: rgba(55, 146, 55, 0.95);       /* Bright green when scrolled */
    --bali-header-backdrop-blur: 10px;

    /* Menu colors */
    --bali-menu-text: #ffffff;
    --bali-menu-active: var(--bali-white);
    --bali-menu-hover-bg: rgba(255, 255, 255, 0.15);
    --bali-menu-text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);

    /* Logo styling - just shadow for depth */
    --bali-logo-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);

    /* ========================================
       SUBMENU-SPECIFIC VARIABLES
       Updated for better visibility
       ======================================== */

    /* Submenu backgrounds - nearly opaque */
    --bali-submenu-bg: rgba(45, 80, 22, 0.98);           /* Increased from 0.95 */
    --bali-submenu-bg-hover: rgba(76, 175, 80, 0.9);     /* Bright green for hover */
    --bali-submenu-text: #ffffff;
    --bali-submenu-text-hover: #ffffff;
    --bali-submenu-border: rgba(255, 255, 255, 0.3);     /* More visible border */
    --bali-submenu-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); /* Stronger shadow */
    --bali-submenu-radius: 8px;
    --bali-submenu-blur: 15px;

    /* ========================================
       SPACING SYSTEM
       ======================================== */

    --bali-space-xs: 4px;
    --bali-space-sm: 8px;
    --bali-space-md: 12px;
    --bali-space-lg: 20px;
    --bali-space-xl: 30px;
    --bali-space-2xl: 40px;
    --bali-space-3xl: 60px;

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

    --bali-text-xs: 0.85em;
    --bali-text-sm: 0.95em;
    --bali-text-base: 1em;
    --bali-text-md: 1.15em;
    --bali-text-lg: 1.30em;
    --bali-text-xl: 1.45em;
    --bali-text-2xl: 1.70em;
    --bali-text-3xl: 2.30em;

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

    --bali-leading-tight: 1.2;
    --bali-leading-normal: 1.5;
    --bali-leading-relaxed: 1.6;

    /* ========================================
       BORDERS & RADIUS
       ======================================== */

    --bali-border-width: 1px;
    --bali-border-width-thick: 2px;

    --bali-radius-sm: 4px;
    --bali-radius-md: 6px;
    --bali-radius-lg: 8px;
    --bali-radius-xl: 12px;
    --bali-radius-2xl: 16px;
    --bali-radius-pill: 20px;
    --bali-radius-circle: 50%;

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

    --bali-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --bali-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
    --bali-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --bali-shadow-lg: 0 8px 25px rgba(0, 0, 0, 0.15);
    --bali-shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.2);
    --bali-shadow-2xl: 0 20px 50px rgba(0, 0, 0, 0.25);

    --bali-shadow-green-sm: 0 2px 8px rgba(45, 80, 22, 0.1);
    --bali-shadow-green-md: 0 4px 15px rgba(45, 80, 22, 0.15);
    --bali-shadow-green-lg: 0 8px 25px rgba(45, 80, 22, 0.2);

    /* ========================================
       TRANSITIONS & ANIMATIONS
       ======================================== */

    --bali-transition-fast: 0.15s ease;
    --bali-transition-base: 0.3s ease;
    --bali-transition-slow: 0.5s ease;
    --bali-transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    --bali-ease-in: cubic-bezier(0.4, 0, 1, 1);
    --bali-ease-out: cubic-bezier(0, 0, 0.2, 1);
    --bali-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

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

    --bali-blur-sm: 5px;
    --bali-blur-md: 10px;
    --bali-blur-lg: 15px;
    --bali-blur-xl: 20px;

    --bali-opacity-disabled: 0.5;
    --bali-opacity-hover: 0.8;

    /* ========================================
       Z-INDEX SCALE
       ======================================== */

    --bali-z-base: 1;
    --bali-z-dropdown: 10;
    --bali-z-sticky: 50;
    --bali-z-header: 100;
    --bali-z-overlay: 500;
    --bali-z-modal: 1000;
    --bali-z-popover: 2000;
    --bali-z-tooltip: 3000;

    /* ========================================
       COMPONENT-SPECIFIC VARIABLES
       ======================================== */

    --bali-header-height: 70px;
    --bali-header-height-mobile: 60px;
    --bali-header-height-scrolled: 50px;
    --bali-header-height-scrolled-mobile: 45px;
    --bali-header-scroll-threshold: 80px;

    --bali--toggle-size: 24px;
    --bali-badge-padding: 4px 10px;

    --bali-btn-padding-sm: 8px 16px;
    --bali-btn-padding-md: 10px 20px;
    --bali-btn-padding-lg: 12px 24px;

    --bali-card-radius: 5px;
    --bali-card-border: var(--bali-green-100);

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

    --bali-gradient-primary: linear-gradient(135deg, var(--bali-green-500), var(--bali-green-900));
    --bali-gradient-light: linear-gradient(135deg, var(--bali-green-50), var(--bali-green-100));
    --bali-gradient-hero: linear-gradient(135deg, #66bb6a 0%, #4caf50 25%, #43a047 50%, #388e3c 75%, #2e7d32 100%);
    --bali-gradient-overlay: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.3));
}

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

@media (max-width: 768px) {
    :root {
        --bali-space-lg: 16px;
        --bali-space-xl: 24px;
        --bali-space-2xl: 32px;

        --bali-text-lg: 16px;
        --bali-text-xl: 18px;
        --bali-text-2xl: 20px;

        --bali-header-height: var(--bali-header-height-mobile);
        --bali-header-height-scrolled: var(--bali-header-height-scrolled-mobile);
        --bali-header-scroll-threshold: 60px;
    }
}

/* ========================================
   HIGH CONTRAST MODE
   ======================================== */

@media (prefers-contrast: high) {
    :root {
        --bali-border-width: 2px;
        --bali-border-width-thick: 3px;
        --bali-text-primary: var(--bali-black);
        --bali-border-medium: var(--bali-black);
        --bali-focus-outline: var(--bali-black);

        /* High contrast header */
        --bali-header-bg-transparent: rgba(0, 0, 0, 0.95);
        --bali-menu-text: #ffffff;
        --bali-menu-active: #ffff00;

        /* High contrast submenu */
        --bali-submenu-bg: rgba(0, 0, 0, 0.98);
        --bali-submenu-bg-hover: rgba(0, 100, 0, 0.98);
        --bali-submenu-border: #ffffff;
    }
}

/* ========================================
   REDUCED MOTION
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    :root {
        --bali-transition-fast: 0.01ms;
        --bali-transition-base: 0.01ms;
        --bali-transition-slow: 0.01ms;
        --bali-transition-smooth: 0.01ms;
    }
}

/* ========================================
   PRINT MODE
   ======================================== */

@media print {
    :root {
        --bali-bg-page: var(--bali-white);
        --bali-text-primary: var(--bali-black);
        --bali-shadow-md: none;
        --bali-shadow-lg: none;
    }
}