/* ==========================================================================
   DEYA MUSIC — дизайн-токены
   Единственный источник значений. Новые цвета, размеры, отступы и радиусы
   добавляются СЮДА и в CLAUDE.md, а не в компоненты.
   ========================================================================== */

:root {
  /* ---------- Бренд ----------
     Заливочный и текстовый оттенки разведены: фирменные цвета задумывались для
     тёмного фона и на светлом не добирают контраста для мелкого текста
     (бирюза 3.1:1, коралл 2.4:1 — оба ниже нормы 4.5:1). Поэтому
     `--c-teal` / `--c-coral` — только заливки, обводки, иконки и декор,
     а текст и ссылки набираются `*-ink`. */
  --c-teal:        #04A594;
  --c-teal-ink:    #037A6D;                  /* текст, ссылки: 5.2:1 на светлом */
  --c-teal-hover:  #026457;
  --c-teal-dim:    rgba(4, 165, 148, 0.12);  /* подложки */
  --c-teal-dim-2:  rgba(4, 165, 148, 0.20);  /* та же подложка в ховере */

  --c-coral:       #FF8561;
  --c-coral-ink:   #C2502A;                  /* текст: 4.7:1 на светлом */
  --c-coral-hover: #FF7043;
  --c-coral-light: #FFE8DC;                  /* светлый край градиента CTA */
  --c-coral-dim:   rgba(255, 133, 97, 0.12);
  --c-coral-edge:  rgba(255, 133, 97, 0.55); /* обводка пастельной кнопки */

  /* Мягкие обводки: сплошной брендовый цвет по контуру кричит на светлом фоне */
  --c-teal-edge:   rgba(4, 165, 148, 0.40);

  /* ---------- Нейтральные: фоны ----------
     Тема светлая. Чистого белого на подложке страницы нет: тёплый почти-белый
     мягче для глаз и даёт белым карточкам проступить. */
  --c-bg:          #FBFAF8;
  --c-surface:     #FFFFFF;
  --c-surface-2:   #F3F1ED;
  --c-border:      #E5E1DB;
  --c-border-soft: #F0EDE8;

  /* Стекло: полупрозрачная белизна для липких панелей поверх контента */
  --c-glass:        rgba(255, 255, 255, 0.72);
  --c-glass-strong: rgba(255, 255, 255, 0.92);

  /* ---------- Нейтральные: текст ----------
     Не чистый чёрный: графит с холодным подтоном, 15.4:1 к фону. */
  --c-text:        #1B2224;
  --c-text-2:      #566063;
  --c-text-3:      #6C7578;   /* 4.5:1 — служебные подписи всё равно читаемы */
  --c-on-accent:   #14191A;   /* текст на коралловой и бирюзовой заливке */

  --c-overlay:     rgba(27, 34, 36, 0.44);   /* фон модалки — дымка, не чернота */
  --c-overlay-2:   rgba(251, 250, 248, 0.97);/* фон лайтбокса */

  /* Засветление кадра под текстом (баннер тура).
     Тема светлая, поэтому текст отделяется от фотографии не затемнением,
     а наоборот — фон страницы наливается поверх кадра. Три ступени: под самим
     текстом почти непрозрачная, к верху кадра сходит на нет. */
  --c-fade-1:      rgba(251, 250, 248, 0.96);
  --c-fade-2:      rgba(251, 250, 248, 0.78);
  --c-fade-3:      rgba(251, 250, 248, 0.18);
  --c-veil:        rgba(251, 250, 248, 0.30);  /* вуаль над фотофоном шапки тура */

  /* ---------- Фоновый декор ----------
     Пятна светятся сквозь фон страницы: цвета брендовые, но почти прозрачные —
     на площадь экрана их приходится единицы процентов насыщенности. */
  --c-glow-teal:   rgba(4, 165, 148, 0.10);
  --c-glow-coral:  rgba(255, 133, 97, 0.14);
  --c-glow-blush:  rgba(255, 176, 170, 0.12);

  /* ---------- Шрифты ---------- */
  --font-display: 'Unbounded', system-ui, sans-serif;
  --font-text:    'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ---------- Размеры шрифта (fluid: mobile 360px → desktop 1280px) ---------- */
  --fs-display:    clamp(2rem,      1.413rem + 2.609vw, 3.5rem);   /* 32 → 56 */
  --fs-h1:         clamp(1.75rem,   1.456rem + 1.304vw, 2.5rem);   /* 28 → 40 */
  --fs-h2:         clamp(1.375rem,  1.228rem + 0.652vw, 1.75rem);  /* 22 → 28 */
  --fs-h3:         clamp(1.125rem,  1.076rem + 0.217vw, 1.25rem);  /* 18 → 20 */
  --fs-card-title: clamp(1.0625rem, 1.030rem + 0.109vw, 1.125rem); /* 17 → 18 */
  --fs-body-l:     clamp(1rem,      0.951rem + 0.217vw, 1.125rem); /* 16 → 18 */
  --fs-body:       clamp(0.9375rem, 0.913rem + 0.109vw, 1rem);     /* 15 → 16 */
  --fs-meta:       clamp(0.875rem,  0.851rem + 0.109vw, 0.9375rem);/* 14 → 15 */
  --fs-caption:    0.8125rem;  /* 13 */
  --fs-overline:   0.75rem;    /* 12 */
  --fs-button:     var(--fs-body);
  --fs-nav:        0.9375rem;  /* 15 */
  --fs-chip:       0.875rem;   /* 14 */

  /* ---------- Отступы (база 4px) ---------- */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px;  --sp-6: 32px;  --sp-7: 48px;  --sp-8: 64px;
  --sp-9: 96px;  --sp-10: 128px;

  /* ---------- Сетка ---------- */
  --container-max: 1280px;
  --container-pad: var(--sp-4);   /* mobile;  переопределяется в base.css */
  --gutter: var(--sp-4);

  /* ---------- Радиусы ---------- */
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-pill: 999px;

  /* ---------- Тени ----------
     На светлом фоне тень работает не «глубиной», а мягким касанием: непрозрачность
     низкая, оттенок холодный — чёрная тень на тёплом фоне выглядит грязью. */
  --shadow-soft:  0 2px 8px rgba(27, 40, 44, 0.05);
  --shadow-card:  0 10px 28px rgba(27, 40, 44, 0.07);
  --shadow-modal: 0 24px 64px rgba(27, 40, 44, 0.16);
  --shadow-up:    0 -10px 28px rgba(27, 40, 44, 0.07);  /* панели, липнущие снизу */

  /* ---------- Движение ---------- */
  --ease:      cubic-bezier(0.2, 0, 0, 1);
  --dur-fast:  150ms;
  --dur-base:  250ms;
  --dur-slow:  400ms;

  /* ---------- Слои ---------- */
  --z-header:  100;
  --z-nav:     110;
  --z-modal:   200;
  --z-toast:   300;
}

@media (min-width: 640px)  { :root { --container-pad: var(--sp-5); --gutter: 20px; } }
@media (min-width: 1024px) { :root { --container-pad: var(--sp-6); --gutter: var(--sp-5); } }