/* ===================================================================
   SHARED VARIABLES - ЕДИНАЯ СИСТЕМА ДЛЯ ВСЕГО ПРОЕКТА
   Избегает конфликтов и дублирования между main.css и yoga-club.css
   ================================================================== */

:root {
    /* === LAYOUT DIMENSIONS === */
    --header-height: 60px;
    --header-height-mobile: 60px;
    --header-height-desktop: 80px;
    
    /* === УНИФИЦИРОВАННАЯ ЦВЕТОВАЯ ПАЛИТРА === */
    --color-primary: #000000;
    --color-secondary: #1a1a1a;
    --color-accent: #FDA700;
    --color-accent-soft: rgba(253, 167, 0, 0.15);
    --color-accent-hover: #E89600;
    
    /* Цвета текста (из yoga-club.css) */
    --color-text: #1a1a1a;
    --color-text-light: #4a4a4a;
    --color-text-muted: #8a8a8a;
    
    /* Luxury accent для нумерации и акцентов */
    --gold-luxe: #D4A373;
    
    /* Цвета фона */
    --color-background: #FFFFFF;
    --color-background-light: #F9FAF0;
    --color-background-soft: #FAFAFA;
    --color-background-card: rgba(249, 250, 240, 0.7);
    
    /* RGB компоненты для полупрозрачных overlay */
    --rgb-background: 255, 255, 255;
    --rgb-background-light: 249, 250, 240;
    --rgb-accent: 253, 167, 0;
    
    /* Основные цвета (из main.css) */
    --color-white: #FFFFFF;
    --color-black: #000000;
    --color-gray: #666666;
    --color-light-gray: #E5E5E5;

    /* === УНИФИЦИРОВАННАЯ ТИПОГРАФИКА === */
    --font-primary: 'Inter', sans-serif;
    --font-heading: 'Playfair Display', serif;
    --font-secondary: 'Playfair Display', serif; /* alias для совместимости */
    --font-accent: 'Playfair Display', serif; /* декоративный шрифт для акцентов и номеров */
    
    /* Размеры шрифтов для hero секций */
    --hero-title-mobile: 2rem;
    --hero-title-tablet: 2.5rem;
    --hero-title-desktop: 3rem;
    --hero-title-large: 3.5rem;
    
    --hero-subtitle-size: 0.8125rem; /* 13px */
    /* hero-description-size управляется в unified-responsive.css */
    
    /* Веса шрифтов */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    
    /* Межбуквенные расстояния */
    /* Синхронизировано с typography.css для единообразия */
    --letter-spacing-tight: -0.02em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.02em;
    --letter-spacing-wider: 0.04em;
    --letter-spacing-widest: 0.08em;
    --letter-spacing-ultra: 0.12em;
    --letter-spacing-subtitle: 0.18em;

    /* === УНИФИЦИРОВАННАЯ СИСТЕМА ОТСТУПОВ === */
    /* Основная система (из main.css) */
    --spacing-xs: 8px;
    --spacing-sm: 16px;
    --spacing-md: 24px;
    --spacing-lg: 32px;
    --spacing-xl: 48px;
    --spacing-2xl: 72px;
    
    /* Дополнительная система (из yoga-club.css) */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 2rem;
    --space-lg: 3rem;
    --space-xl: 5rem;
    --space-2xl: 8rem;
    
    /* Специальные отступы */
    --space-h1-mobile: 24px;
    --space-h1-desktop: 32px;

    /* === УНИФИЦИРОВАННЫЕ КОНТЕЙНЕРЫ === */
    --container-max: 1200px;        /* Единая переменная для максимальной ширины (элегантность) */
    --container-standard: 1200px;   /* Стандартная ширина */
    --container-padding: 20px;      /* Боковые отступы */
    --container-padding-mobile: 16px;

    /* Hero контейнер padding */
    --hero-padding: 60px 20px 20px; /* Унифицированный как в yoga-club */
    --hero-padding-mobile: 60px 20px 20px;

    /* === ПЕРЕХОДЫ И АНИМАЦИИ === */
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* === Z-INDEX SCALE === */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-header: 1000;
    --z-header-control: 1001;
    --z-overlay: 2000;
    --z-skip-link: 2001;
    --z-modal: 3000;
    --z-modal-control: 3001;

    /* === ЛИНЕЙНЫЕ ВЫСОТЫ === */
    /* Синхронизировано с typography.css для единообразия */
    --line-height-tight: 1.2;
    --line-height-snug: 1.4;
    --line-height-normal: 1.6;
    --line-height-relaxed: 1.8;
    --line-height-loose: 2;

    /* === MOBILE TYPOGRAPHY TOKENS (320-768px) === */
    /* Font Size Tokens - Major Second Scale (1.125×) */
    --fs-mobile-2xs: 0.625rem;    /* 10px - very small labels */
    --fs-mobile-xs:  0.75rem;     /* 12px - small labels, meta */
    --fs-mobile-sm:  0.875rem;    /* 14px - secondary text, buttons */
    --fs-mobile-base: 1rem;       /* 16px - body text, paragraphs */
    --fs-mobile-md:  1.125rem;    /* 18px - lead text, descriptions */
    --fs-mobile-lg:  1.25rem;     /* 20px - subheadings */
    --fs-mobile-xl:  1.5rem;      /* 24px - h4, card titles */
    --fs-mobile-2xl: 2rem;        /* 32px - h3, section titles */
    --fs-mobile-3xl: 2.5rem;      /* 40px - h2, hero subtitles */
    --fs-mobile-4xl: 3rem;        /* 48px - h1, hero titles */

    /* Line Height Tokens for Mobile */
    --lh-mobile-tight:    1.2;    /* headings */
    --lh-mobile-snug:     1.4;    /* subheadings */
    --lh-mobile-base:     1.5;    /* body text default */
    --lh-mobile-relaxed:  1.65;   /* comfortable reading */
    --lh-mobile-loose:    1.8;    /* spacious paragraphs */

    /* Letter Spacing Tokens for Mobile */
    --ls-mobile-tight:    -0.02em; /* large headings */
    --ls-mobile-normal:   0;       /* body text */
    --ls-mobile-wide:     0.04em;  /* buttons, labels */
    --ls-mobile-wider:    0.08em;  /* caps, numbers */
    --ls-mobile-widest:   0.12em;  /* luxury spacing */

    /* Font Weight Tokens for Mobile */
    --fw-mobile-light:    300;     /* elegant headings */
    --fw-mobile-normal:   400;     /* body text */
    --fw-mobile-medium:   500;     /* emphasis */
    --fw-mobile-semibold: 600;     /* strong emphasis */
    --fw-mobile-bold:     700;     /* CTA, highlights */

    /* Text Spacing for Mobile */
    --space-mobile-text-xs:  0.25rem;  /* 4px */
    --space-mobile-text-sm:  0.5rem;   /* 8px */
    --space-mobile-text-md:  0.75rem;  /* 12px */
    --space-mobile-text-lg:  1rem;     /* 16px */
    --space-mobile-text-xl:  1.5rem;   /* 24px */
    --space-mobile-text-2xl: 2rem;     /* 32px */

    /* Section Spacing for Mobile */
    --space-mobile-section-sm: 2.5rem;  /* 40px */
    --space-mobile-section-md: 3.5rem;  /* 56px */
    --space-mobile-section-lg: 5rem;    /* 80px */
    
    /* Mobile Section Rhythm - Unified Values */
    --spacing-section-mobile: 3.5rem;    /* 56px - unified mobile padding */
    --spacing-section-tablet: 4.5rem;    /* 72px - unified tablet section padding */
    --spacing-section-desktop: 6rem;     /* 96px - unified desktop section padding */
    --spacing-section-large: 7.5rem;     /* 120px - unified large desktop section padding */
    --spacing-subtitle-mobile: 2rem;     /* 32px - subtitle (like "ОСНОВИ:") top margin */
    --spacing-subtitle-bottom-mobile: 1.5rem; /* 24px - subtitle bottom margin */
    --spacing-card-mobile: 1.25rem;      /* 20px - gap between cards */
    --spacing-section-gap-mobile: 2rem;  /* 32px - gap between major blocks */

    /* === РАДИУСЫ СКРУГЛЕНИЯ === */
    --border-radius-sm: 8px;
    --border-radius-md: 12px;
    --border-radius-lg: 16px;
    --border-radius-xl: 20px;
    --border-radius-2xl: 24px;
    --border-radius-full: 50%;

    /* === ТЕНИ === */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.08);
    --shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.1);
    
    /* === LUXURY WELLNESS PALETTE === */
    --color-bg-sand: #FDF8F3;        /* Soft cream surface */
    --color-surface: #FFFFFF;         /* Pure white cards */
    --color-text-dark: #0E0E0E;      /* Deep readable text */
    
    /* Luxury Shadows */
    --shadow-luxury-soft: 0 2px 8px rgba(0, 0, 0, 0.04);
    --shadow-luxury-card: 0 8px 24px rgba(0, 0, 0, 0.05);
    --shadow-luxury-elevated: 0 16px 48px rgba(0, 0, 0, 0.08);
}

/* === МЕДИА-ЗАПРОСЫ УПРАВЛЯЮТСЯ В unified-responsive.css === */
/* Эти переменные больше не нужны - responsive логика в unified-responsive.css */

/* === UTILITY КЛАССЫ ДЛЯ БЫСТРОГО ПРИМЕНЕНИЯ === */
.text-primary { color: var(--color-text); }
.text-light { color: var(--color-text-light); }
.text-muted { color: var(--color-text-muted); }
.text-accent { color: var(--color-accent); }

.font-light { font-weight: var(--font-weight-light); }
.font-normal { font-weight: var(--font-weight-normal); }
.font-medium { font-weight: var(--font-weight-medium); }

.container-wide { max-width: var(--container-max); margin: 0 auto; }
.container-standard { max-width: var(--container-standard); margin: 0 auto; }

/* === CTA (Buttons) Unified Metrics === */
:root {
    --cta-max-width-mobile: 320px;
    --cta-gap-mobile: 10px;
    --cta-gap-tablet: 16px;
    --cta-margin-top-mobile: 24px;
}

/* === LUXURY WELLNESS DESIGN SYSTEM FOR COURSE PROGRAM === */
/* Refined, premium styling based on JSON specifications */
:root {
    /* Luxury Wellness Section Spacing */
    --lw-section-padding-mobile: 56px 0;
    --lw-section-padding-tablet: 72px 0;
    --lw-section-padding-desktop: 96px 0;
    --lw-section-padding-large: 120px 0;
    
    /* Container & Grid Spacing */
    --lw-container-padding-mobile: 0 20px;
    --lw-container-padding-tablet: 0 32px;
    --lw-container-padding-desktop: 0 40px;
    --lw-grid-gap-mobile: 20px;
    --lw-grid-gap-tablet: 28px;
    --lw-grid-gap-desktop: 32px;
    
    /* Luxury Card Surface */
    --lw-card-background: rgba(249, 250, 240, 0.6); /* translucent cream */
    --lw-card-radius: 12px; /* soft rounded corners */
    --lw-card-padding-mobile: 24px;
    --lw-card-padding-tablet: 32px;
    --lw-card-padding-desktop: 40px;
    
    /* Delicate Shadow Palette */
    --lw-shadow-default: 0 4px 16px rgba(0, 0, 0, 0.04); /* delicate depth */
    --lw-shadow-hover: 0 12px 32px rgba(0, 0, 0, 0.06); /* luxury lift */
    --lw-shadow-tap: 0 2px 12px rgba(0, 0, 0, 0.08); /* tap feedback */
    
    /* Typography - Luxury Wellness */
    --lw-title-mobile: 2rem;
    --lw-title-desktop: 3rem;
    --lw-title-weight: 400;
    --lw-title-spacing: -0.02em;
    
    --lw-number-size: 0.875rem;
    --lw-number-weight: 400;
    --lw-number-color: #FDA700;
    --lw-number-tracking: 0.08em;
    
    --lw-text-size: 1rem;
    --lw-text-line-height: 1.6;
    --lw-text-weight: 400;
    --lw-text-color: #1a1a1a;
    
    /* Header Margins */
    --lw-header-margin-mobile: 40px;
    --lw-header-margin-tablet: 56px;
    --lw-header-margin-desktop: 64px;
    
    /* Luxury Animations */
    --lw-appear-duration: 0.6s;
    --lw-appear-easing: cubic-bezier(0.23, 1, 0.32, 1);
    --lw-hover-translate: -6px;
    --lw-hover-transition: 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    --lw-tap-scale: 0.98;
}