/* tokens.css — дизайн-токены (брендбук): цвета, шрифты, отступы, радиусы, тени */

:root {
    color-scheme: only light;

    /* --- Брендовые цвета --- */
    --site-color:            #a0bcdd;
    --site-color-dark:       #44588f;
    --site-color-light:      #dde8f6;
    --site-color-contrast:   #ffffff;

    /* --- Синяя кнопка .btn--brand (основная) --- */
    --brand:                 #5a8cc8;
    --brand-dark:            #4677b0;
    --btn-sheen:             linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(0, 0, 0, .08));
    --shadow-brand:          0 2px 5px rgba(60, 105, 160, .40), inset 0 1px 0 rgba(255, 255, 255, .30);
    --shadow-brand-hover:    0 3px 7px rgba(60, 105, 160, .52), inset 0 1px 0 rgba(255, 255, 255, .30);

    /* --- Коралл — акцент --- */
    --action:                #ef5a6f;
    --action-dark:           #e0455c;
    --action-light:          #fdecee;

    /* --- Вспомогательные --- */
    --color-heading:         #28335f;
    --panel-dark:            #3a4878;
    --color-accent:          var(--action);
    --color-club:            #d4a23c;
    --color-club-light:      #f8f0e0;
    --color-taro:            #8b6cc0;
    --color-taro-light:      #efe9f8;
    --color-nature:          #5b9d6b;
    --color-nature-light:    #e7f2ea;
    --color-crystal:         #35a7a3;
    --color-crystal-light:   #e2f3f2;
    --color-success:         #2e7d32;
    --color-danger:          #e7677a;
    --color-warning:         #e0a800;

    /* --- Текст и линии на тёмных панелях --- */
    --text-on-dark-strong:   rgba(255, 255, 255, .9);
    --text-on-dark:          rgba(255, 255, 255, .8);
    --text-on-dark-muted:    rgba(255, 255, 255, .6);
    --hairline-on-dark:      rgba(255, 255, 255, .14);

    /* --- Нейтральная палитра --- */
    --color-text:            #353a52;
    --color-text-muted:      #6b7088;
    --color-border:          #e2e2e8;
    --color-bg:              #ffffff;
    --color-bg-soft:         #f6f5f9;

    /* --- Фоны --- */
    --bg-shell:              #e7e1d8;
    --bg-page:               #f5f0e8;
    --bg-content:            #eef4fa;
    --bg-hero-top:           #f0e4d4;
    --bg-hero-mid:           #f7f1e9;
    --gradient-hero:         linear-gradient(180deg,
                                 var(--bg-hero-top) 0,
                                 var(--bg-hero-mid) 30%,
                                 var(--bg-page) 60%);
    --bg-bloom-1:            radial-gradient(45% 40% at 12% 8%, rgba(232,206,170,.30), transparent 72%);
    --bg-bloom-2:            radial-gradient(42% 36% at 90% 4%, rgba(212,196,224,.22), transparent 72%);

    /* --- Liquid glass --- */
    --glass-bg:              rgba(255, 255, 255, .50);
    --glass-bg-frost:        rgba(255, 255, 255, .80);
    --glass-bg-strong:       #ffffff;
    --glass-bg-tint:         var(--site-color);
    --glass-border:          rgba(150, 165, 195, .22);
    --glass-blur:            26px;
    --glass-radius:          20px;
    --glass-shadow:          0 0 2px rgba(80, 68, 56, .20),
                             0 2px 5px rgba(80, 68, 56, .16);
    --glass-shadow-hover:    0 0 2px rgba(80, 68, 56, .26),
                             0 3px 7px rgba(80, 68, 56, .26);
    --glass-highlight:       inset 0 1px 0 rgba(255, 255, 255, .70),
                             inset 0 -1px 1px rgba(60, 50, 40, .05);
    --glass-highlight-dark:  inset 0 1px 0 rgba(255, 255, 255, .12);
    --glass-shadow-inset:    inset 0 2px 4px rgba(40, 51, 95, .30);

    /* --- Типографика --- */
    --font-base:    "Bitter", Georgia, serif;
    --font-heading: "Bitter", Georgia, serif;
    --font-ui:      "Bitter", Georgia, serif;

    --fs-base:      16px;
    --lh-base:      1.6;
    --fw-normal:    400;
    --fw-medium:    500;
    --fw-semibold:  600;
    --fw-bold:      700;

    /* --- Шкала отступов --- */
    --space-1: 4px;
    --space-2: 8px;
    --space-2h: 12px;
    --space-3: 16px;
    --space-4: 24px;
    --space-5: 32px;
    --space-6: 48px;
    --space-7: 64px;

    /* --- Радиусы --- */
    --radius-sm: 4px;
    --radius:    8px;
    --radius-lg: 16px;
    --radius-pill: 999px;

    /* --- Повторяющиеся rgba --- */
    --color-navy-50:  rgba(40, 51, 95, .5);
    --color-white-45: rgba(255, 255, 255, .45);

    /* --- Тени --- */
    --shadow:    0 4px 16px rgba(0, 0, 0, .10);
    --card-shadow: 0 2px 5px rgba(40, 51, 95, .30), 0 1px 2px rgba(40, 51, 95, .24);

    /* --- Раскладка --- */
    --container-max: 1400px;
    --container-pad: 16px;
    --page-max:      1480px;
    --layer-gap:     12px;

    /* --- Анимация --- */
    --transition: .2s ease;
    --anim-expand:     cubic-bezier(.4, 0, .2, 1);
    --anim-expand-dur: .5s;

    /* --- Слои (z-index) --- */
    --z-header:   1000;
    --z-overlay:  1040;
    --z-modal:    1050;
    --z-progress: 1100;
}

/* --- Адаптив ≤400: ужимаем поля и инсет слоёв (меняем токены — тянется по сайту) --- */
@media (max-width: 400px) {
    :root {
        --container-pad: 12px;
        --layer-gap:     10px;
    }
}