/* Токены dariiak_eng — единственный источник цвета, кегля и отступа.
   Значения выведены из design/palette.md и design/identity/embed-guide.md;
   в компонентах и страницах hex, px и em напрямую не пишутся.
   Тёмной темы нет намеренно: сестра — «только светлые оттенки»,
   «тёмное» на сайте — шоколадная секция, а не режим. */

:root {
  /* --- Цвет: пять плоскостей и одна точка ------------------------------ */
  --c-vanilla: #FFF8E2;   /* фон страницы, бумага */
  --c-butter:  #FFEFB9;   /* тёплые карточки, стикеры, плашки */
  --c-powder:  #BCD1DE;   /* вторая плоскость: гингем, календарь */
  --c-walnut:  #5E442E;   /* весь текст и «тёмное» вместо чёрного */
  --c-accent:  #7A1F2B;   /* одна точка акцента на регион экрана */
  --c-paper:   #FFFFFF;   /* только рамка полароида */

  /* Производные: полутона под линии и подложки, без новых цветов */
  --c-walnut-60: rgb(94 68 46 / .6);    /* второстепенный текст, подписи */
  --c-walnut-25: rgb(94 68 46 / .25);   /* линии, рамки, точки бумаги */
  --c-powder-55: rgb(188 209 222 / .55);/* клетка гингема */
  --c-accent-12: rgb(122 31 43 / .12);  /* подложка под акцентное слово */

  /* Роли: страница читает роли, а не цвета — так шоколадная секция
     переопределяет четыре строки, а не каждый компонент */
  --bg:        var(--c-vanilla);
  --bg-card:   var(--c-butter);
  --bg-alt:    var(--c-powder);
  --ink:       var(--c-walnut);
  --ink-soft:  var(--c-walnut-60);
  --line:      var(--c-walnut-25);
  --accent:    var(--c-accent);
  --on-accent: var(--c-vanilla);

  /* --- Шрифты: три семьи, три роли ------------------------------------- */
  --f-display: 'Playfair Display', 'Times New Roman', Georgia, serif;
  --f-script:  'Marck Script', 'Segoe Script', cursive;
  --f-text:    'Golos Text', 'Segoe UI', Arial, sans-serif;

  /* Кегли: текст 18 px, заголовок первого экрана в 4–5 раз крупнее.
     clamp — чтобы на телефоне заголовок не ломал строку на слоги. */
  --fs-hero:  clamp(2.75rem, 1.2rem + 7vw, 6rem);     /* 44 → 96 */
  --fs-h2:    clamp(2rem, 1.2rem + 3.2vw, 3.5rem);     /* 32 → 56 */
  --fs-h3:    clamp(1.375rem, 1.1rem + 1.2vw, 1.75rem);/* 22 → 28 */
  --fs-lead:  clamp(1.125rem, 1rem + .6vw, 1.375rem);  /* 18 → 22 */
  --fs-body:  1.125rem;                                /* 18 */
  --fs-small: .9375rem;                                /* 15 */
  --fs-cap:   .8125rem;                                /* 13, капитель-подпись */
  --fs-script: 1.15em;   /* script чуть крупнее строки, в которой стоит */

  --lh-tight: 1.05;   /* заголовки */
  --lh-text:  1.55;   /* текст */
  --ls-cap:   .14em;  /* разрядка капители */
  --measure:  62ch;   /* ширина строки текста */

  /* --- Пространство: шаг 8 px ------------------------------------------ */
  --s-1: .25rem;  --s-2: .5rem;  --s-3: .75rem; --s-4: 1rem;
  --s-6: 1.5rem;  --s-8: 2rem;   --s-12: 3rem;  --s-16: 4rem;
  --s-24: 6rem;   --s-32: 8rem;
  --section-y: clamp(var(--s-16), 10vw, var(--s-32));  /* воздух между секциями */
  --container: 72rem;      /* 1152 px */
  --gutter: clamp(var(--s-4), 4vw, var(--s-12));

  /* --- Форма: бумага, стикер, полароид --------------------------------- */
  --r-sm: .375rem;   /* ярлык папки, чип */
  --r-md: .875rem;   /* карточка */
  --r-lg: 1.5rem;    /* стикер, тарелка */
  --r-pill: 999px;   /* кнопка */
  --polaroid-pad: var(--s-3);
  --polaroid-foot: var(--s-8);            /* широкое нижнее поле */
  --tilt-1: -2.5deg; --tilt-2: 1.5deg; --tilt-3: -1deg;  /* наклон полароидов, три и хватит */

  /* Тени только у «предметов, лежащих на столе»: полароид, вырезка,
     стикер. Плоские плашки и карточки тени не получают. */
  --shadow-paper: 0 1px 2px rgb(94 68 46 / .12), 0 6px 18px rgb(94 68 46 / .10);
  --shadow-object: 0 10px 24px rgb(94 68 46 / .16);

  /* --- Движение: мало и медленно --------------------------------------- */
  --t-fast: 160ms;
  --t-slow: 420ms;
  --ease: cubic-bezier(.2, .7, .2, 1);
}


/* Масштаб: на широких экранах базовый кегль растёт, и вместе с ним всё,
   что задано в rem — отступы, вырезки, кнопки. Владелец смотрел веер при
   175 % и сказал «почти нравится»: страница не должна тонуть в воздухе. */
html { font-size: 100%; }
@media (min-width: 1200px) { html { font-size: 115%; } }     /* 18.4 px — владелец: 137 % оказалось крупно, герой не влезал */
@media (min-width: 1500px) { html { font-size: 125%; } }     /* 20 px */

/* Шоколадная секция: те же компоненты, четыре роли наоборот */
.section--cocoa {
  --bg:        var(--c-walnut);
  --bg-card:   rgb(255 239 185 / .10);
  --ink:       var(--c-vanilla);
  --ink-soft:  rgb(255 248 226 / .65);
  --line:      rgb(255 248 226 / .25);
  --accent:    var(--c-butter);
  --on-accent: var(--c-walnut);
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t-slow: 0ms; }
}