:root {
    /* Colors - Elista Design System Palette */
    
    /* 2.1 Основные цвета (Dark) — фон, графика, текст, логотип */
    --color-dark-red: #9F1314;        
    --color-dark-blue: #0F4D75;       /* Dark Blue - основной фирменный */
    --color-primary-rgb: 15, 77, 117; 
    --color-secondary-rgb: 231, 114, 43;

    --color-dark-brown: #614739;
    --color-dark-brown-rgb: 97, 71, 57;
    --color-dark-green: #605900;
    --color-dark-green-rgb: 96, 89, 0;
    --color-dark-orange: #B75200;     /* Dark Orange - акценты, иконки */
    --color-dark-orange-rgb: 183, 82, 0;

    /* 2.2 Дополнительные цвета (Medium) — фон и графика, НЕ для текстов */
    --color-medium-red: #EA343A;
    --color-medium-red-rgb: 234, 52, 58;
    --color-medium-blue: #3576A8;
    --color-medium-blue-rgb: 53, 118, 168;
    --color-medium-brown: #9B6940;
    --color-medium-brown-rgb: 155, 105, 64;
    --color-medium-green: #8B8A08;
    --color-medium-green-rgb: 139, 138, 8;
    --color-medium-orange: #E7722B;
    --color-medium-orange-rgb: 231, 114, 43;

    /* 2.3 Дополнительные цвета (Light) — фон и графика, НЕ для текстов */
    --color-light-red: #FF9590;
    --color-light-red-rgb: 255, 149, 144;
    --color-light-blue: #A3C5D3;
    --color-light-blue-rgb: 163, 197, 211;
    --color-light-brown: #D3BEA3;
    --color-light-brown-rgb: 211, 190, 163;
    --color-light-green: #CCC5A1;
    --color-light-green-rgb: 204, 197, 161;
    --color-light-orange: #EDBF8B;
    --color-light-orange-rgb: 237, 191, 139;

    /* 2.4 Нейтральные цвета */
    --color-light-yellow: #F9F3DA;    /* Light Yellow - альтернативный фон */
    --color-light-yellow-rgb: 249, 243, 218;
    --color-white: #FFFFFF;           /* White - основной фон */
    --color-white-rgb: 255, 255, 255;
    --color-grey: #C5C5C5;            /* Grey - границы,muted текст */
    --color-grey-rgb: 197, 197, 197;
    --color-black: #212121;           /* Black - основной текст */
    --color-black-rgb: 33, 33, 33;
    --color-overlay-dark-rgb: 10, 25, 47; /* Dark navy for overlays */

    /* Semantic UI Accents (mapped from Elista palette) */
    --color-success: var(--color-dark-green);
    --color-success-rgb: 96, 89, 0;
    --color-warning: var(--color-dark-orange);
    --color-error: var(--color-dark-red);
    --color-info: var(--color-dark-blue);
    --color-accent-gold-rgb: 183, 82, 0;  /* Dark Orange as gold accent */
    --color-link: var(--color-dark-blue);
    --color-link-hover: var(--color-primary-dark);

    /* Mapping to site-wide tokens */
    --color-primary: var(--color-dark-blue);
    --color-primary-light: var(--color-medium-blue);
    --color-primary-dark: #0a334d;    /* Darkened Dark Blue for active states */
    
    --color-secondary: var(--color-medium-orange);
    --color-secondary-light: var(--color-light-orange);
    --color-secondary-dark: var(--color-dark-orange);
    
    --color-accent: var(--color-dark-orange);
    --color-accent-light: var(--color-medium-orange);
    
    --color-bg: var(--color-white);
    --color-bg-alt: var(--color-light-yellow);
    --color-bg-alt-purple: #F3E8FF;
    --color-bg-alt-purple-rgb: 243, 232, 255;
    --color-bg-alt-blue: #E0E7FF;
    --color-bg-alt-blue-rgb: 224, 231, 255;
    --color-bg-warm: var(--color-light-brown);
    
    --color-text: var(--color-black);
    --color-text-muted: var(--color-grey);
    
    --color-border: var(--color-grey);

    /* Typography */
    --font-heading: 'TT Nooks Script', serif;
    --font-body: 'Inter', sans-serif;
    --font-script: 'TT Nooks Script', cursive;

    /* Line Heights & Letter Spacing */
    --lh-heading: 1.25;
    --lh-body: 1.6;
    --ls-tight: -0.02em;
    --ls-wide: 0.05em;

    /* Font Sizes */
    --font-size-xs: 0.75rem;
    --font-size-base: 1rem;
    --font-size-sm: 0.875rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.5rem;
    --font-size-2xl: 2rem;
    --font-size-3xl: 3rem;

    /* Header Semantic Sizes — fluid via clamp(min, fluid, max) */
    --h1-size: clamp(2rem, 5vw, 3rem);       /* 32px → 48px */
    --h2-size: clamp(1.75rem, 3.5vw, 2.5rem); /* 28px → 40px */
    --h3-size: clamp(1.25rem, 2.5vw, 1.75rem); /* 20px → 28px */

    /* Breakpoints (для справки — в @media используются напрямую)
       --bp-mobile:  768px   мобайл / телефоны
       --bp-tablet:  1024px  планшеты / компактный десктоп
       --bp-desktop: 1280px  широкий десктоп
    */

    /* Grid & Layout */
    --container-max-width: 1200px;
    --container-wide-max-width: 1600px;
    --grid-gap: var(--space-xl);
    --grid-gap-lg: var(--space-3xl);

    /* 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-section: 6rem;

    /* Border Radius */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12);

    /* Easing Functions */
    --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1); /* кнопки, интерактивные элементы */
    --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);      /* модалки, reveals, карта */
    --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);  /* упругие / bounce эффекты */
    --ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1);       /* раскрытие / скрытие блоков */

    /* Duration Tokens */
    --duration-instant: 150ms;  /* overlay, быстрый отклик */
    --duration-fast:    200ms;  /* микро-интеракции */
    --duration-base:    300ms;  /* стандарт */
    --duration-slow:    400ms;  /* панели, меню */
    --duration-enter:   600ms;  /* входящие анимации */

    /* Transition Shorthands */
    --transition-fast:   150ms ease;
    --transition-base:   300ms ease;
    --transition-ui:     200ms var(--ease-out-quart);  /* кнопки */
    --transition-reveal: 400ms var(--ease-out-expo);   /* панели, дропдауны */
    --transition-spring: 600ms var(--ease-spring);     /* упругие эффекты */
}