/**
 * CSS-переменные (дизайн-токены) проекта "Хитовая Песня"
 */

@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@700;800&family=Manrope:wght@400;500;600;700&family=Cormorant+Garamond:ital,wght@1,500&display=swap');

:root {
    /* ─── Цвета ─── */
    --color-primary:       #8B1E3F;
    --color-primary-dark:  #6B1230;
    --color-primary-light: #A83255;

    --color-accent:        #D4A574;
    --color-accent-light:  #F0E6D2;
    --color-accent-dark:   #B8864E;

    --color-bg:            #F5EFE6;
    --color-bg-white:      #FFFFFF;
    --color-bg-section:    #FAF6F0;

    --color-text:          #2C1810;
    --color-text-muted:    #6B5D54;
    --color-text-light:    #9A8880;

    --color-border:        #E8D5B7;
    --color-border-light:  #F0E6D2;

    --color-success:       #4A7C59;
    --color-success-light: #EBF4EE;
    --color-error:         #B33951;
    --color-error-light:   #FDEEF1;
    --color-warning:       #C17B2E;
    --color-warning-light: #FDF3E7;

    /* ─── Типографика ─── */
    --font-heading:  'Unbounded', sans-serif;
    --font-body:     'Manrope', sans-serif;
    --font-accent:   'Cormorant Garamond', serif;

    --font-size-base:  16px;
    --font-size-sm:    14px;
    --font-size-xs:    12px;
    --font-size-lg:    18px;
    --font-size-xl:    20px;

    --font-size-h1:    clamp(32px, 5vw, 56px);
    --font-size-h2:    clamp(28px, 4vw, 44px);
    --font-size-h3:    clamp(20px, 3vw, 30px);
    --font-size-h4:    clamp(18px, 2.5vw, 24px);

    --font-weight-normal:   400;
    --font-weight-medium:   500;
    --font-weight-semibold: 600;
    --font-weight-bold:     700;
    --font-weight-black:    800;

    --line-height-tight:   1.2;
    --line-height-normal:  1.6;
    --line-height-relaxed: 1.8;

    /* ─── Отступы ─── */
    --space-xs:  8px;
    --space-sm:  16px;
    --space-md:  24px;
    --space-lg:  32px;
    --space-xl:  48px;
    --space-2xl: 64px;
    --space-3xl: 96px;
    --space-4xl: 128px;

    /* ─── Скругления ─── */
    --radius-xs:   6px;
    --radius-sm:   10px;
    --radius-md:   12px;
    --radius-lg:   16px;
    --radius-xl:   20px;
    --radius-2xl:  28px;
    --radius-full: 9999px;

    /* ─── Тени ─── */
    --shadow-xs:  0 2px 8px  rgba(139, 30, 63, 0.06);
    --shadow-sm:  0 4px 20px rgba(139, 30, 63, 0.08);
    --shadow-md:  0 8px 30px rgba(139, 30, 63, 0.12);
    --shadow-lg:  0 15px 40px rgba(139, 30, 63, 0.15);
    --shadow-xl:  0 25px 60px rgba(139, 30, 63, 0.20);

    --shadow-accent-sm: 0 4px 20px rgba(212, 165, 116, 0.25);
    --shadow-accent-md: 0 8px 30px rgba(212, 165, 116, 0.35);

    /* ─── Анимации ─── */
    --transition-fast:   all 0.15s ease;
    --transition-base:   all 0.3s ease;
    --transition-slow:   all 0.5s ease;
    --transition-spring: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ─── Z-индексы ─── */
    --z-base:     1;
    --z-dropdown: 100;
    --z-sticky:   200;
    --z-overlay:  300;
    --z-modal:    400;
    --z-toast:    500;

    /* ─── Сетка ─── */
    --container-width: 1200px;
    --container-pad:   var(--space-sm);

    /* ─── Шапка ─── */
    --header-height: 72px;
}

/* ─── Медиа-переменные ─── */
@media (min-width: 768px) {
    :root {
        --container-pad: var(--space-md);
    }
}

@media (min-width: 1024px) {
    :root {
        --container-pad: var(--space-lg);
    }
}