/**
 * CSS Variables - Дизайн-токены темы Traditsia
 *
 * ВАЖНО: Переменные из этого файла должны использоваться везде, где это возможно.
 * Если подходящей переменной нет — создайте её здесь и используйте.
 *
 * @package Neve Child Traditsia
 * @version 3.0.0
 */

:root {
    /* ==========================================================================
       ЦВЕТА - ОСНОВНАЯ ПАЛИТРА
       ========================================================================== */

    /* Основные брендовые цвета */
    --trds-primary: #8b4513;
    --trds-primary-light: #a65d2e;
    --trds-primary-dark: #6b3410;
    --trds-primary-rgb: 139, 69, 19;

    --trds-secondary: #d4a574;
    --trds-secondary-light: #e0b88a;
    --trds-secondary-dark: #c8925e;
    --trds-secondary-rgb: 212, 165, 116;

    --trds-accent: #c19660;
    --trds-accent-light: #d1ab78;
    --trds-accent-dark: #a87f4a;
    --trds-accent-rgb: 193, 150, 96;

    /* Фоновые цвета */
    --trds-background: #faf9f7;
    --trds-background-alt: #f5f3f0;
    --trds-background-dark: #ebe8e3;
    --trds-background-rgb: 250, 249, 247;

    --trds-surface: #ffffff;
    --trds-surface-elevated: #ffffff;
    --trds-surface-overlay: rgba(255, 255, 255, 0.95);

    /* ==========================================================================
       ЦВЕТА - ТЕКСТ И НЕЙТРАЛЬНЫЕ
       ========================================================================== */

    /* Цвета текста */
    --trds-text-primary: #2c1810;
    --trds-text-secondary: #5d4037;
    --trds-text-muted: #8a7968;
    --trds-text-disabled: #b8a99a;
    --trds-text-inverse: #ffffff;
    --trds-white: #ffffff;
    --trds-text-link: var(--trds-primary);
    --trds-text-link-hover: var(--trds-primary-dark);

    /* Нейтральные цвета */
    --trds-neutral-50: #faf9f7;
    --trds-neutral-100: #f5f3f0;
    --trds-neutral-200: #ebe8e3;
    --trds-neutral-300: #d6d1c9;
    --trds-neutral-400: #b8a99a;
    --trds-neutral-500: #8a7968;
    --trds-neutral-600: #5d4037;
    --trds-neutral-700: #4a3228;
    --trds-neutral-800: #2c1810;
    --trds-neutral-900: #1a0f0a;

    /* ==========================================================================
       ЦВЕТА - ФУНКЦИОНАЛЬНЫЕ (СОСТОЯНИЯ)
       ========================================================================== */

    /* Успех */
    --trds-success: #4a7c59;
    --trds-success-light: #5d9a6f;
    --trds-success-dark: #3a6247;
    --trds-success-bg: #edf5ef;
    --trds-success-rgb: 74, 124, 89;

    /* Предупреждение */
    --trds-warning: #d4952a;
    --trds-warning-light: #e0a845;
    --trds-warning-dark: #b07d20;
    --trds-warning-bg: #fdf6e8;
    --trds-warning-rgb: 212, 149, 42;

    /* Ошибка */
    --trds-error: #a64444;
    --trds-error-light: #c05858;
    --trds-error-dark: #8a3636;
    --trds-error-bg: #fbeaea;
    --trds-error-rgb: 166, 68, 68;

    /* Информация */
    --trds-info: #5a7ba6;
    --trds-info-light: #7094bf;
    --trds-info-dark: #486285;
    --trds-info-bg: #eef3f8;
    --trds-info-rgb: 90, 123, 166;

    /* ==========================================================================
       ТИПОГРАФИКА - ШРИФТЫ
       ========================================================================== */

    /* Семейства шрифтов */
    --trds-font-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
    --trds-font-secondary: Georgia, 'Times New Roman', Times, serif;
    --trds-font-mono: 'SF Mono', Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    --trds-font-display: var(--trds-font-secondary);

    /* ==========================================================================
       ТИПОГРАФИКА - РАЗМЕРЫ ШРИФТОВ (Fluid Typography)
       ========================================================================== */

    /* Заголовки */
    --trds-fs-hero: clamp(2rem, 5vw + 1rem, 3.5rem);
    --trds-fs-h1: clamp(1.75rem, 4vw + 0.5rem, 2.5rem);
    --trds-fs-h2: clamp(1.5rem, 3vw + 0.5rem, 2rem);
    --trds-fs-h3: clamp(1.25rem, 2vw + 0.5rem, 1.5rem);
    --trds-fs-h4: clamp(1.125rem, 1.5vw + 0.5rem, 1.25rem);
    --trds-fs-h5: clamp(1rem, 1vw + 0.5rem, 1.125rem);
    --trds-fs-h6: clamp(0.875rem, 0.75vw + 0.5rem, 1rem);

    /* Основной текст */
    --trds-fs-xs: clamp(0.75rem, 1.5vw, 0.875rem);
    --trds-fs-sm: clamp(0.875rem, 2vw, 1rem);
    --trds-fs-base: clamp(1rem, 2.5vw, 1.125rem);
    --trds-fs-lg: clamp(1.125rem, 3vw, 1.25rem);
    --trds-fs-xl: clamp(1.25rem, 3.5vw, 1.5rem);
    --trds-fs-2xl: clamp(1.5rem, 4vw, 1.75rem);
    --trds-fs-3xl: clamp(1.75rem, 4.5vw, 2rem);

    /* Фиксированные размеры (для иконок, бейджей и т.д.) */
    --trds-fs-icon-sm: 1rem;
    --trds-fs-icon-md: 1.25rem;
    --trds-fs-icon-lg: 1.5rem;
    --trds-fs-icon-xl: 2rem;

    /* ==========================================================================
       ТИПОГРАФИКА - ВЫСОТА СТРОКИ
       ========================================================================== */

    --trds-lh-none: 1;
    --trds-lh-tight: 1.2;
    --trds-lh-snug: 1.4;
    --trds-lh-normal: 1.6;
    --trds-lh-relaxed: 1.8;
    --trds-lh-loose: 2;

    /* ==========================================================================
       ТИПОГРАФИКА - МЕЖБУКВЕННЫЕ ИНТЕРВАЛЫ
       ========================================================================== */

    --trds-tracking-tighter: -0.05em;
    --trds-tracking-tight: -0.02em;
    --trds-tracking-normal: -0.01em;
    --trds-tracking-wide: 0;
    --trds-tracking-wider: 0.025em;
    --trds-tracking-widest: 0.1em;

    /* ==========================================================================
       ТИПОГРАФИКА - ТОЛЩИНА ШРИФТА
       ========================================================================== */

    --trds-fw-thin: 100;
    --trds-fw-light: 300;
    --trds-fw-normal: 400;
    --trds-fw-medium: 500;
    --trds-fw-semibold: 600;
    --trds-fw-bold: 700;
    --trds-fw-extrabold: 800;
    --trds-fw-black: 900;

    /* ==========================================================================
       ОТСТУПЫ (Fluid Spacing)
       ========================================================================== */

    /* Основная шкала отступов */
    --trds-space-0: 0;
    --trds-space-px: 1px;
    --trds-space-0-5: 0.125rem;
    --trds-space-1: 0.25rem;
    --trds-space-1-5: 0.375rem;
    --trds-space-2: 0.5rem;
    --trds-space-2-5: 0.625rem;
    --trds-space-3: 0.75rem;
    --trds-space-3-5: 0.875rem;
    --trds-space-4: 1rem;
    --trds-space-5: 1.25rem;
    --trds-space-6: 1.5rem;
    --trds-space-7: 1.75rem;
    --trds-space-8: 2rem;
    --trds-space-9: 2.25rem;
    --trds-space-10: 2.5rem;
    --trds-space-11: 2.75rem;
    --trds-space-12: 3rem;
    --trds-space-14: 3.5rem;
    --trds-space-16: 4rem;
    --trds-space-20: 5rem;
    --trds-space-24: 6rem;
    --trds-space-28: 7rem;
    --trds-space-32: 8rem;
    --trds-space-36: 9rem;
    --trds-space-40: 10rem;

    /* Адаптивные отступы (fluid) */
    --trds-space-xs: clamp(0.25rem, 0.5vw, 0.5rem);
    --trds-space-sm: clamp(0.5rem, 1vw, 0.75rem);
    --trds-space-md: clamp(0.75rem, 1.5vw, 1rem);
    --trds-space-lg: clamp(1rem, 2vw, 1.5rem);
    --trds-space-xl: clamp(1.5rem, 3vw, 2rem);
    --trds-space-2xl: clamp(2rem, 4vw, 3rem);
    --trds-space-3xl: clamp(3rem, 6vw, 4rem);
    --trds-space-4xl: clamp(4rem, 8vw, 6rem);
    --trds-space-5xl: clamp(6rem, 10vw, 8rem);

    /* Отступы для секций */
    --trds-section-gap-sm: clamp(2rem, 4vw, 3rem);
    --trds-section-gap-md: clamp(3rem, 6vw, 5rem);
    --trds-section-gap-lg: clamp(4rem, 8vw, 7rem);

    /* ==========================================================================
       РАЗМЕРЫ И КОНТЕЙНЕРЫ
       ========================================================================== */

    /* Контейнеры */
    --container-max: min(98.75rem, 100% - 2rem);
    --trds-container-max: min(98.75rem, 100% - 2rem);
    --trds-container-padding: clamp(1rem, 3vw, 2rem);
    /* Шапка и футер шире основного контента — намеренно */
    --trds-header-container-max: min(107.8125rem, 100% - 2.5rem);
    --trds-container-sm: 640px;
    --trds-container-md: 768px;
    --trds-container-lg: 1024px;
    --trds-container-xl: 1280px;
    --trds-container-2xl: 1536px;

    /* Сайдбар */
    --trds-sidebar-width: clamp(280px, 20vw, 320px);
    --trds-sidebar-width-collapsed: 60px;
    --trds-content-margin: clamp(160px, 13vw, 200px);

    /* Сетка */
    --trds-grid-gap: clamp(0.75rem, 2vw, 2.5rem);
    --trds-grid-gap-sm: clamp(0.5rem, 1vw, 1rem);
    --trds-grid-gap-lg: clamp(1.5rem, 3vw, 3rem);

    /* ==========================================================================
       КОМПОНЕНТЫ - РАЗМЕРЫ
       ========================================================================== */

    /* Высоты компонентов */
    --trds-header-height: auto;
    --trds-header-height-fixed: 60px;
    --trds-footer-height: auto;
    --trds-breadcrumbs-height: 2.5rem;
    --trds-nav-height: 56px;
    --trds-admin-bar-height: 32px;
    --trds-admin-bar-height-mobile: 46px;

    /* Размеры элементов форм */
    --trds-input-height-sm: 2rem;
    --trds-input-height-md: 2.5rem;
    --trds-input-height-lg: 3rem;
    --trds-button-height-sm: 2rem;
    --trds-button-height-md: 2.5rem;
    --trds-button-height-lg: 3rem;

    /* Размеры аватаров */
    --trds-avatar-xs: 1.5rem;
    --trds-avatar-sm: 2rem;
    --trds-avatar-md: 2.5rem;
    --trds-avatar-lg: 3rem;
    --trds-avatar-xl: 4rem;
    --trds-avatar-2xl: 6rem;

    /* Размеры иконок */
    --trds-icon-xs: 0.75rem;
    --trds-icon-sm: 1rem;
    --trds-icon-md: 1.25rem;
    --trds-icon-lg: 1.5rem;
    --trds-icon-xl: 2rem;
    --trds-icon-2xl: 2.5rem;

    /* ==========================================================================
       СКРУГЛЕНИЯ (Border Radius)
       ========================================================================== */

    --trds-radius-none: 0;
    --trds-radius-sm: clamp(0.25rem, 0.5vw, 0.5rem);
    --trds-radius-md: clamp(0.375rem, 0.75vw, 0.75rem);
    --trds-radius-lg: clamp(0.5rem, 1vw, 1rem);
    --trds-radius-xl: clamp(0.75rem, 1.5vw, 1.5rem);
    --trds-radius-2xl: clamp(1rem, 2vw, 2rem);
    --trds-radius-full: 9999px;

    /* Фиксированные скругления */
    --trds-radius-2: 0.125rem;
    --trds-radius-4: 0.25rem;
    --trds-radius-6: 0.375rem;
    --trds-radius-8: 0.5rem;
    --trds-radius-12: 0.75rem;
    --trds-radius-16: 1rem;
    --trds-radius-24: 1.5rem;

    /* ==========================================================================
       ГРАНИЦЫ (Borders)
       ========================================================================== */

    /* Толщина границ */
    --trds-border-0: 0;
    --trds-border-1: 1px;
    --trds-border-2: 2px;
    --trds-border-4: 4px;
    --trds-border-8: 8px;

    /* Цвета границ */
    --trds-border-color: rgba(0, 0, 0, 0.08);
    --trds-border-color-light: rgba(0, 0, 0, 0.04);
    --trds-border-color-dark: rgba(0, 0, 0, 0.12);
    --trds-border-color-focus: var(--trds-primary);
    --trds-border-color-error: var(--trds-error);

    /* Готовые границы */
    --trds-border-default: 1px solid var(--trds-border-color);
    --trds-border-light: 1px solid var(--trds-border-color-light);
    --trds-border-dark: 1px solid var(--trds-border-color-dark);

    /* ==========================================================================
       ТЕНИ (Shadows)
       ========================================================================== */

    /* Тени для элементов */
    --trds-shadow-none: none;
    --trds-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --trds-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    --trds-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --trds-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --trds-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --trds-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --trds-shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);

    /* Тени с брендовым цветом */
    --trds-shadow-primary: 0 4px 14px rgba(139, 69, 19, 0.25);
    --trds-shadow-primary-lg: 0 10px 25px rgba(139, 69, 19, 0.3);

    /* Тени для карточек */
    --trds-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.1);
    --trds-shadow-card-hover: 0 8px 25px rgba(0, 0, 0, 0.15);

    /* Тени для выпадающих меню */
    --trds-shadow-dropdown: 0 10px 40px rgba(0, 0, 0, 0.15);
    --trds-shadow-popup: 0 15px 50px rgba(0, 0, 0, 0.2);

    /* ==========================================================================
       АНИМАЦИИ И ПЕРЕХОДЫ
       ========================================================================== */

    /* Длительность */
    --trds-duration-instant: 0s;
    --trds-duration-fast: 0.15s;
    --trds-duration-normal: 0.2s;
    --trds-duration-medium: 0.3s;
    --trds-duration-slow: 0.5s;
    --trds-duration-smooth: 0.7s;
    --trds-duration-slower: 0.8s;
    --trds-duration-slowest: 1s;

    /* Обратная совместимость */
    --trds-transition-fast: 0.2s;
    --trds-transition-medium: 0.3s;
    --trds-transition-slow: 0.8s;

    /* Функции плавности (easing) */
    --trds-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --trds-ease-linear: linear;
    --trds-ease-in: cubic-bezier(0.4, 0, 1, 1);
    --trds-ease-out: cubic-bezier(0, 0, 0.2, 1);
    --trds-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --trds-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --trds-ease-elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6);

    /* Готовые переходы */
    --trds-transition: all var(--trds-transition-medium) var(--trds-ease);
    --trds-transition-smooth: all var(--trds-duration-smooth) var(--trds-ease);
    --trds-transition-colors: color var(--trds-duration-normal) var(--trds-ease), background-color var(--trds-duration-normal) var(--trds-ease), border-color var(--trds-duration-normal) var(--trds-ease);
    --trds-transition-opacity: opacity var(--trds-duration-normal) var(--trds-ease);
    --trds-transition-transform: transform var(--trds-duration-medium) var(--trds-ease);
    --trds-transition-shadow: box-shadow var(--trds-duration-medium) var(--trds-ease);

    /* Задержки анимаций */
    --trds-delay-none: 0s;
    --trds-delay-75: 75ms;
    --trds-delay-100: 100ms;
    --trds-delay-150: 150ms;
    --trds-delay-200: 200ms;
    --trds-delay-300: 300ms;
    --trds-delay-500: 500ms;
    --trds-delay-700: 700ms;
    --trds-delay-1000: 1000ms;

    /* ==========================================================================
       Z-INDEX (Слои)
       ========================================================================== */

    --trds-z-behind: -1;
    --trds-z-base: 0;
    --trds-z-raised: 1;
    --trds-z-dropdown: 10;
    --trds-z-sticky: 20;
    --trds-z-fixed: 30;
    --trds-z-sidebar: 40;
    --trds-z-overlay: 50;
    --trds-z-modal-backdrop: 60;
    --trds-z-modal: 70;
    --trds-z-popover: 80;
    --trds-z-tooltip: 90;
    --trds-z-header: 100;
    --trds-z-nav: 999;
    --trds-z-dropdown-menu: 1000;
    --trds-z-max: 9999;

    /* ==========================================================================
       ПРОЗРАЧНОСТЬ (Opacity)
       ========================================================================== */

    --trds-opacity-0: 0;
    --trds-opacity-5: 0.05;
    --trds-opacity-10: 0.1;
    --trds-opacity-20: 0.2;
    --trds-opacity-25: 0.25;
    --trds-opacity-30: 0.3;
    --trds-opacity-40: 0.4;
    --trds-opacity-50: 0.5;
    --trds-opacity-60: 0.6;
    --trds-opacity-70: 0.7;
    --trds-opacity-75: 0.75;
    --trds-opacity-80: 0.8;
    --trds-opacity-90: 0.9;
    --trds-opacity-95: 0.95;
    --trds-opacity-100: 1;

    /* Прозрачность для состояний */
    --trds-opacity-disabled: 0.5;
    --trds-opacity-hover: 0.08;
    --trds-opacity-focus: 0.12;
    --trds-opacity-pressed: 0.16;

    /* ==========================================================================
       ФИЛЬТРЫ И ЭФФЕКТЫ
       ========================================================================== */

    /* Размытие (blur) */
    --trds-blur-none: 0;
    --trds-blur-sm: 4px;
    --trds-blur-md: 8px;
    --trds-blur-lg: 12px;
    --trds-blur-xl: 16px;
    --trds-blur-2xl: 24px;
    --trds-blur-3xl: 40px;

    /* Backdrop blur для стеклянного эффекта */
    --trds-backdrop-blur: blur(8px);
    --trds-backdrop-blur-lg: blur(16px);

    /* Насыщенность и яркость */
    --trds-brightness-50: brightness(0.5);
    --trds-brightness-75: brightness(0.75);
    --trds-brightness-90: brightness(0.9);
    --trds-brightness-100: brightness(1);
    --trds-brightness-105: brightness(1.05);
    --trds-brightness-110: brightness(1.1);
    --trds-brightness-125: brightness(1.25);

    /* ==========================================================================
       ТОЧКИ РАЗРЫВА (Breakpoints)
       Для использования в CSS calc() и JavaScript
       ========================================================================== */

    /*
     * КАНОНИЧЕСКИЕ ТОЧКИ РАЗРЫВА — единственно допустимые значения для @media
     * (CSS-переменные нельзя использовать в @media, поэтому здесь документация)
     *
     *   xs:  480px   — самые маленькие телефоны
     *   sm:  768px   — мобильный / планшет (основной переключатель)
     *   md: 1024px   — планшет / десктоп
     *   lg: 1280px   — широкий десктоп
     *   xl: 1600px   — большие экраны, пересчёт сайдбара
     *
     * WP-исключения (только там, где нужны конкретные пороги WP core):
     *   782px — высота WP admin-bar меняется
     *   600px — высота WP admin-bar на очень маленьких экранах
     */
    --trds-breakpoint-xs: 480px;
    --trds-breakpoint-sm: 640px;
    --trds-breakpoint-md: 768px;
    --trds-breakpoint-lg: 1024px;
    --trds-breakpoint-xl: 1280px;
    --trds-breakpoint-2xl: 1536px;

    /* Социальные иконки (шапка и футер) */
    --trds-social-icon-size: clamp(32px, 2.8vw, 45px);
    --trds-social-icon-font: clamp(16px, 1.5vw, 24px);

    /* Колонка рассылки в футере */
    --trds-footer-col-newsletter: clamp(240px, 20vw, 300px);

    /* Отступ верхней части контента (замена магического + 100px) */
    --trds-content-top-offset: 100px;

    /* ==========================================================================
       СООТНОШЕНИЯ СТОРОН (Aspect Ratios)
       ========================================================================== */

    --trds-aspect-square: 1;
    --trds-aspect-video: 16 / 9;
    --trds-aspect-photo: 4 / 3;
    --trds-aspect-portrait: 3 / 4;
    --trds-aspect-wide: 21 / 9;
    --trds-aspect-golden: 1.618;

    /* ==========================================================================
       СКРОЛЛБАР
       ========================================================================== */

    --trds-scrollbar-width: 8px;
    --trds-scrollbar-width-thin: 4px;
    --trds-scrollbar-track: var(--trds-neutral-100);
    --trds-scrollbar-thumb: var(--trds-primary);
    --trds-scrollbar-thumb-hover: var(--trds-secondary);

    /* ==========================================================================
       ВЫДЕЛЕНИЕ ТЕКСТА (Selection)
       ========================================================================== */

    --trds-selection-bg: var(--trds-primary);
    --trds-selection-color: var(--trds-text-inverse);

    /* ==========================================================================
       ФОКУС (Focus Ring)
       ========================================================================== */

    --trds-focus-ring-width: 2px;
    --trds-focus-ring-offset: 2px;
    --trds-focus-ring-color: var(--trds-primary);
    --trds-focus-ring: 0 0 0 var(--trds-focus-ring-offset) var(--trds-background), 0 0 0 calc(var(--trds-focus-ring-offset) + var(--trds-focus-ring-width)) var(--trds-focus-ring-color);

    /* ==========================================================================
       СПЕЦИАЛЬНЫЕ ПЕРЕМЕННЫЕ
       ========================================================================== */

    /* Золотой цвет для византийских элементов */
    --trds-gold: #ffd700;
    --trds-gold-dark: #daa520;
    --trds-gold-light: #ffe44d;

    /* Цвета для ссылок */
    --trds-link-color: var(--trds-primary);
    --trds-link-hover-color: var(--trds-primary-dark);
    --trds-link-visited-color: var(--trds-text-secondary);
    --trds-link-active-color: var(--trds-primary-dark);

    /* Оверлеи */
    --trds-overlay-light: rgba(255, 255, 255, 0.5);
    --trds-overlay-medium: rgba(0, 0, 0, 0.5);
    --trds-overlay-dark: rgba(0, 0, 0, 0.75);
    --trds-overlay-brand: rgba(139, 69, 19, 0.8);

    /* ==========================================================================
       COURSE LANDING PAGE - COLORS FROM LOGO
       Based on logo.png: Navy blue, bright blue, golden yellow, green
       ========================================================================== */

    /* Logo-based brand colors for course landing page */
    --trds-course-primary: #003d82;
    --trds-course-primary-light: #0052b3;
    --trds-course-primary-dark: #002855;
    --trds-course-primary-rgb: 0, 61, 130;

    --trds-course-secondary: #1e88e5;
    --trds-course-secondary-light: #42a5f5;
    --trds-course-secondary-dark: #1565c0;
    --trds-course-secondary-rgb: 30, 136, 229;

    --trds-course-accent: #ffc107;
    --trds-course-accent-light: #ffd54f;
    --trds-course-accent-dark: #ffa000;
    --trds-course-accent-rgb: 255, 193, 7;

    --trds-course-green: #43a047;
    --trds-course-green-light: #66bb6a;
    --trds-course-green-dark: #2e7d32;
    --trds-course-green-rgb: 67, 160, 71;

    /* CTA button gradients */
    --trds-course-cta-gradient: linear-gradient(
        135deg,
        var(--trds-course-primary) 0%,
        var(--trds-course-primary-dark) 100%
    );
    --trds-course-cta-gradient-hover: linear-gradient(
        135deg,
        var(--trds-course-primary-light) 0%,
        var(--trds-course-primary) 100%
    );

    /* CTA shadows */
    --trds-course-shadow-cta: 0 4px 14px rgba(0, 61, 130, 0.3);
    --trds-course-shadow-cta-hover: 0 6px 20px rgba(0, 61, 130, 0.4);

    /* Hero section */
    --trds-course-hero-overlay: linear-gradient(
        135deg,
        rgba(0, 61, 130, 0.85) 0%,
        rgba(30, 136, 229, 0.75) 100%
    );
    --trds-course-hero-min-height: min(90vh, 800px);
    --trds-course-hero-content-max-width: 50rem;

    /* Problem cards colors */
    --trds-course-problem-chemical: #e53935;
    --trds-course-problem-chemical-rgb: 229, 57, 53;
    --trds-course-problem-behavioral: #fb8c00;
    --trds-course-problem-behavioral-rgb: 251, 140, 0;
    --trds-course-problem-emotional: #5e35b1;
    --trds-course-problem-emotional-rgb: 94, 53, 177;
    --trds-course-problem-codependency: #00897b;
    --trds-course-problem-codependency-rgb: 0, 137, 123;

    /* Card dimensions */
    --trds-course-card-min-width: 280px;
    --trds-course-card-max-width: 400px;

    /* Timeline */
    --trds-course-timeline-line-width: 3px;
    --trds-course-timeline-dot-size: 1rem;

    /* Floating contact */
    --trds-course-floating-width: clamp(280px, 20vw, 320px);
    --trds-course-floating-offset: var(--trds-space-lg);

    /* Animations */
    --trds-course-fade-in-duration: var(--trds-duration-slow);
    --trds-course-slide-distance: 20px;
    --trds-course-counter-duration: 2s;

    /* Typography */
    --trds-course-stat-number-size: clamp(2.5rem, 6vw, 4rem);
    --trds-course-badge-padding: var(--trds-space-xs) var(--trds-space-sm);
    --trds-course-badge-radius: var(--trds-radius-full);
}

/* ==========================================================================
   ТЁМНАЯ ТЕМА (опционально, для будущего использования)
   ========================================================================== */

@media (prefers-color-scheme: dark) {
    :root.theme-auto {
        /* Переопределение цветов для тёмной темы */
        --trds-background: #1a1512;
        --trds-background-alt: #231c17;
        --trds-surface: #2c241e;
        --trds-surface-elevated: #362d26;

        --trds-text-primary: #f5f3f0;
        --trds-text-secondary: #d6d1c9;
        --trds-text-muted: #a89a8a;

        --trds-border-color: rgba(255, 255, 255, 0.1);
        --trds-border-color-light: rgba(255, 255, 255, 0.05);
        --trds-border-color-dark: rgba(255, 255, 255, 0.15);
    }
}

/* ==========================================================================
   РЕЖИМ УМЕНЬШЕННОГО ДВИЖЕНИЯ (Accessibility)
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    :root {
        --trds-duration-instant: 0s;
        --trds-duration-fast: 0.01s;
        --trds-duration-normal: 0.01s;
        --trds-duration-medium: 0.01s;
        --trds-duration-slow: 0.01s;
        --trds-duration-smooth: 0.01s;
        --trds-duration-slower: 0.01s;
        --trds-duration-slowest: 0.01s;

        --trds-transition-fast: 0.01s;
        --trds-transition-medium: 0.01s;
        --trds-transition-slow: 0.01s;
    }
}