/* Дизайн-токены сайта кондитерской.
   Палитра: ТОЛЬКО 4 бренд-цвета + белый. Все остальные оттенки —
   это эти же цвета с прозрачностью или смешанные с белым. */

/* Шрифты подключаются локально из ../fonts/fonts.css (без Google Fonts — см. политику конфиденциальности).
   На сайте: Dela Gothic One (заголовки), Lobster (логотип, акценты), Onest (текст),
   Cormorant Garamond — только в обложке гайда. Marck Script, Oswald и Unbounded не загружены. */

:root {
  /* ---------- Бренд-палитра (не добавлять новых цветов!) ---------- */
  --cherry: #8e1825;     /* Cherry Red — главный акцент */
  --blue: #c8d9ec;       /* Columbia Blue */
  --butter: #ffedad;     /* Butter Yellow */
  --choco: #3d2722;      /* Dark Chocolate — текст */
  --white: #ffffff;      /* белый, как бумажный стаканчик */

  /* ---------- Роли цветов ---------- */
  --c-bg: color-mix(in srgb, var(--butter) 22%, var(--white));   /* тёплый молочный фон */
  --c-surface: var(--white);
  --c-surface-2: color-mix(in srgb, var(--butter) 55%, var(--white)); /* жёлтые плашки */
  --c-surface-3: color-mix(in srgb, var(--blue) 60%, var(--white));   /* голубые плашки */
  --c-text: var(--choco);
  --c-muted: color-mix(in srgb, var(--choco) 78%, var(--white));   /* 78%: контраст ≥4.5 на всех светлых плашках */
  --c-primary: var(--cherry);
  --c-primary-ink: var(--butter);   /* жёлтый на вишнёвом, как вывеска knead */
  --c-secondary: var(--blue);
  --c-secondary-ink: var(--cherry);
  --c-tertiary: var(--butter);
  --c-tertiary-ink: var(--cherry);
  --c-line: color-mix(in srgb, var(--choco) 14%, var(--white));
  --c-star: var(--cherry);
  --shadow-rgb: 61 39 34;           /* = choco */

  /* ---------- Полоски (фирменный приём) ---------- */
  --stripe-w: 28px;
  --stripes-blue: repeating-linear-gradient(90deg, var(--blue) 0 var(--stripe-w), var(--white) var(--stripe-w) calc(var(--stripe-w) * 2));
  --stripes-butter: repeating-linear-gradient(90deg, var(--butter) 0 var(--stripe-w), var(--white) var(--stripe-w) calc(var(--stripe-w) * 2));
  --stripes-cherry: repeating-linear-gradient(90deg, var(--cherry) 0 var(--stripe-w), var(--blue) var(--stripe-w) calc(var(--stripe-w) * 2));
  --stripes-palme: repeating-linear-gradient(90deg, var(--blue) 0 calc(var(--stripe-w) * 3), var(--butter) calc(var(--stripe-w) * 3) calc(var(--stripe-w) * 6));
  --stripes-thin: repeating-linear-gradient(90deg, var(--blue) 0 4px, var(--white) 4px 22px);

  /* ---------- Шрифты ---------- */
  --font-display: "Dela Gothic One", "Arial Black", sans-serif;
  --font-condensed: "Oswald", "Arial Narrow", sans-serif;
  --font-wide: "Unbounded", sans-serif;
  --font-serif: "Cormorant Garamond", Georgia, serif;
  --font-script: "Marck Script", cursive;
  --font-logo: "Lobster", cursive;   /* логотип в духе Palmé / Puff */
  --font-body: "Onest", system-ui, sans-serif;

  /* ---------- Размеры шрифтов ---------- */
  --fs-mega: clamp(48px, 13vw, 220px);
  --fs-h1: clamp(40px, 7vw, 96px);
  --fs-h2: clamp(30px, 4.2vw, 56px);
  --fs-h3: clamp(20px, 2vw, 28px);
  --fs-lead: clamp(17px, 1.4vw, 20px);
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-micro: 12px;

  --lh-tight: 0.95;
  --lh-head: 1.1;
  --lh-body: 1.55;
  --ls-display: -0.02em;
  --ls-micro: 0.12em;

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

  --section-gap: clamp(64px, 9vw, 128px);
  --container: 1280px;
  --gutter: clamp(16px, 3vw, 40px);
  --grid-gap: 24px;

  /* ---------- Скругления ---------- */
  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 28px;
  --r-pill: 999px;

  /* ---------- Тени ---------- */
  --shadow-sm: 0 2px 8px rgb(var(--shadow-rgb) / 0.06);
  --shadow-md: 0 8px 24px rgb(var(--shadow-rgb) / 0.08);
  --shadow-lg: 0 20px 48px rgb(var(--shadow-rgb) / 0.12);
  --shadow-sticker: 0 6px 16px rgb(var(--shadow-rgb) / 0.18);

  /* ---------- Анимация ---------- */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --t-fast: 200ms;
  --t-base: 300ms;
}