/* ==========================================================================
   Oil Massage — Дизайн-система (токены)
   Настроение: тёплый натуральный спа. Главный цвет — шалфей.
   Шрифт пока Manrope везде; заголовочный шрифт выбираем позже,
   меняется одной строкой --font-display.
   Хексы менять только здесь.
   ========================================================================== */

:root {
  /* --- Шалфей: главный цвет системы (подложки, кнопки, акценты) --- */
  --sage-900: #2A362B;   /* самый глубокий, тёмные подложки, текст-акцент */
  --sage-800: #384A38;   /* тёмная подложка */
  --sage-700: #47593F;   /* подложка / ховер кнопки */
  --sage-600: #5C7150;   /* основная кнопка */
  --sage-500: #7A8A6C;   /* базовый шалфей (любимый оттенок) */
  --sage-400: #93A187;
  --sage-300: #B4BEA8;
  --sage-200: #CFD6C4;   /* тонкие детали, рамки */
  --sage-100: #E5E9DE;   /* бледный шалфейный фон */

  /* --- Нейтральные: тёплый крем и песок (светлые секции, бумага) --- */
  --cream:    #FAF7F0;   /* самый светлый, фон светлых секций */
  --sand-100: #F1EDE3;   /* тёплый бежевый */
  --sand-200: #E4DED0;   /* глубже, рамки и разделители */
  --sand-300: #D3CAB6;

  /* --- Чернила (текст). Тёмный тёплый, в родстве с шалфеем --- */
  --ink:       #23271F;  /* основной текст на светлом */
  --ink-soft:  #545A49;  /* вторичный текст на светлом */
  --ink-faint: #888E7C;  /* подписи, мелкое */
  --paper:     #F4F0E7;  /* основной текст на тёмном/шалфейном */
  --paper-soft:#C8CDBC;  /* вторичный текст на тёмном */

  /* --- Заглушки под будущие ассеты: ровный серый, без текстур и градиентов.
         Меняется одной строкой, когда фото и ролик приедут — заглушки уйдут. --- */
  --placeholder:      #C4C4C4;
  --placeholder-ink:  #7C7C7C;

  /* --- Стекло (полупрозрачные кнопки/панели поверх фото и подложек) --- */
  --glass-light: rgba(255, 255, 255, 0.16);   /* стекло на тёмном фоне */
  --glass-light-brd: rgba(255, 255, 255, 0.32);
  --glass-dark:  rgba(35, 39, 31, 0.10);       /* стекло на светлом фоне */
  --glass-dark-brd: rgba(35, 39, 31, 0.16);
  /* Зелёное стекло: шалфейная плашка, сквозь которую видно фото под ней.
     Плотность правится альфой: 0.30 прозрачнее, 0.55 плотнее. */
  --glass-sage:     rgba(58, 74, 52, 0.42);
  --glass-sage-brd: rgba(233, 239, 221, 0.30);

  /* --- Семантические роли (через них верстаем) --- */
  --bg:            var(--cream);
  --bg-warm:       var(--sand-100);
  --surface:       #FFFFFF;
  --surface-tint:  var(--sage-100);
  --border:        var(--sand-200);
  --accent:        var(--sage-600);   /* акцент теперь тоже шалфей */
  --accent-deep:   var(--sage-800);
  --text:          var(--ink);
  --text-soft:     var(--ink-soft);

  /* --- Типографика --- */
  /* Заголовочный шрифт временно = текстовый. Марк выберет позже. */
  --font-text:    "Manrope", -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: var(--font-text);

  /* Модульная шкала (1.25) */
  --step--1: clamp(0.83rem, 0.79rem + 0.2vw, 0.94rem);
  --step-0:  clamp(1.00rem, 0.93rem + 0.35vw, 1.19rem);
  --step-1:  clamp(1.25rem, 1.13rem + 0.6vw,  1.58rem);
  --step-2:  clamp(1.56rem, 1.37rem + 0.95vw, 2.11rem);
  --step-3:  clamp(1.95rem, 1.65rem + 1.5vw,  2.81rem);
  --step-4:  clamp(2.44rem, 1.97rem + 2.35vw, 3.75rem);
  --step-5:  clamp(3.05rem, 2.33rem + 3.6vw,  5.00rem);
  --step-6:  clamp(3.81rem, 2.70rem + 5.6vw,  6.67rem);

  --leading-tight: 1.08;
  --leading-snug:  1.2;
  --leading-body:  1.6;
  --tracking-wide: 0.12em;

  /* --- Отступы (шкала 4px) --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* --- Скругления (макет очень скруглённый) --- */
  --r-sm:   12px;
  --r:      20px;
  --r-lg:   28px;
  --r-xl:   40px;
  --r-pill: 999px;

  /* --- Тени (тёплые, мягкие) --- */
  --shadow-sm:  0 1px 2px rgba(42, 54, 43, 0.06),
                0 2px 6px rgba(42, 54, 43, 0.05);
  --shadow:     0 4px 12px rgba(42, 54, 43, 0.08),
                0 12px 28px rgba(42, 54, 43, 0.08);
  --shadow-lg:  0 10px 30px rgba(42, 54, 43, 0.16),
                0 30px 60px rgba(42, 54, 43, 0.12);
  --shadow-sage: 0 8px 24px rgba(71, 89, 63, 0.28);

  /* --- Движение --- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur:  0.4s;

  /* --- Ширина контента --- */
  --content: 1200px;
  --content-wide: 1360px;
}

/* --------------------------------------------------------------------------
   Текстуры подложек. «Приятная текстура»: тонкий лён/зерно поверх цвета.
   -------------------------------------------------------------------------- */
:root {
  /* Лёгкое зерно: испечённый PNG-тайл (tools/gen-noise.js), дёшево тайлится */
  --grain: url("../assets/noise.png");
}

/* Шалфейная текстурная подложка (Блоки 2 и 5 макета) */
.surface-green {
  background-color: var(--sage-700);
  background-image:
    var(--grain),
    radial-gradient(120% 90% at 15% 0%, rgba(180, 190, 168, 0.24), transparent 60%),
    linear-gradient(160deg, var(--sage-600) 0%, var(--sage-700) 45%, var(--sage-900) 100%);
  background-blend-mode: soft-light, normal, normal;
  color: var(--paper);
}

/* Средняя шалфейная подложка (#B4BEA8 = --sage-300, цвет «MASSAGE» в логотипе).
   Тот же рецепт, что у .surface-green, но светлее: текст на ней тёмный. Блок 3. */
.surface-sage-mid {
  position: relative;
  /* Сила зерна на светлой подложке. Считано по размаху яркости (0..255):
     0.85 = 12.8, столько же, сколько soft-light даёт в Блоке 2 (12.98).
     1.0 = 15.1 (максимум тайла), 0.5 = 7.6 (слабее, чем в Блоке 2), 0 = выключить. */
  --grain-strength: 0.85;
  background-color: var(--sage-300);
  background-image:
    radial-gradient(120% 90% at 12% 0%, rgba(250, 247, 240, 0.50), transparent 62%),
    linear-gradient(160deg, #C4CDB9 0%, var(--sage-300) 46%, #A2AD95 100%);
  color: var(--ink);
}
/* Затемнение подложки. Нужно, когда две соседние секции одного цвета идут
   внахлёст: без разницы в тоне пазухи скруглённых углов не читаются и стык
   пропадает. 0 — базовый тон, 0.06 — едва заметно темнее. */
.surface-sage-mid::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: rgba(20, 28, 18, var(--tint-strength, 0));
  border-radius: inherit;
  pointer-events: none;
}
/* Зерно отдельным слоем: на светлом фоне soft-light почти не виден,
   overlay держит текстуру. Лежит под контентом (z-index), на карточки не влияет. */
.surface-sage-mid::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: var(--grain);
  mix-blend-mode: overlay;
  opacity: var(--grain-strength);
  border-radius: inherit;
  pointer-events: none;
}

/* Тёплая песочная подложка с лёгким зерном */
.surface-sand {
  background-color: var(--sand-100);
  background-image:
    var(--grain),
    linear-gradient(180deg, var(--cream) 0%, var(--sand-100) 100%);
  background-blend-mode: soft-light, normal;
  color: var(--ink);
}

/* Бледная шалфейная подложка (светлая, для нейтральных секций) */
.surface-sage-soft {
  background-color: var(--sage-100);
  background-image:
    var(--grain),
    linear-gradient(180deg, #EEF1E8 0%, var(--sage-100) 100%);
  background-blend-mode: soft-light, normal;
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   База
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--step-0);
  line-height: var(--leading-body);
  color: var(--text);
  background: var(--bg);
  font-weight: 450;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ink);
}

p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

::selection { background: var(--sage-200); color: var(--ink); }

/* Скрыто визуально, но читается скринридером и держит якорь секции */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   Кнопки (общие классы системы)
   -------------------------------------------------------------------------- */
.btn {
  font-family: var(--font-text); font-weight: 700; font-size: var(--step-0);
  border: none; cursor: pointer; border-radius: var(--r-pill);
  padding: 0.85em 1.8em; display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
/* Основная — шалфей */
.btn-primary { background: var(--sage-600); color: var(--paper); box-shadow: var(--shadow-sage); }
.btn-primary:hover { background: var(--sage-700); transform: translateY(-2px); }
/* Белая простая */
.btn-white { background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); }
.btn-white:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
/* Контурная */
.btn-outline { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--sage-300); }
.btn-outline:hover { box-shadow: inset 0 0 0 1.5px var(--sage-600); transform: translateY(-2px); }
/* Мягкий шалфей — цвет кнопки «Хочу на массаж» (.about__pulse, sage-500) */
.btn-sage-soft { background: var(--sage-500); color: var(--paper); box-shadow: var(--shadow-sage); }
.btn-sage-soft:hover { background: var(--sage-600); transform: translateY(-2px); }
/* Стеклянная на тёмном/фото */
.btn-glass {
  background: var(--glass-light); color: var(--paper);
  border: none;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.btn-glass:hover { background: rgba(255,255,255,0.26); transform: translateY(-2px); }
/* Стеклянная на светлом */
.btn-glass-dark {
  background: var(--glass-dark); color: var(--ink);
  border: 1px solid var(--glass-dark-brd);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.btn-glass-dark:hover { background: rgba(35,39,31,0.16); transform: translateY(-2px); }