/* Токены дизайн-системы «Ритуал».

   Две температуры — не два набора стилей, а два набора ЗНАЧЕНИЙ одних и тех
   же токенов. Тёмная стоит на витрине (главная, посадочные, сертификаты),
   кремовая под чтением (блог, статьи, вакансии): тёмный фон под текстом в
   тысячу слов снижает дочитывания, а дочитывания у нас в отчёте клиенту.

   Всё, что не палитра бренда, объявляется здесь токеном. Литерал цвета,
   разбросанный по файлам, не читается как решение и разъезжается. */
@font-face{
  font-family:'Garamond';
  src:url('../media/fonts/Garamond.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
:root{
  /* Палитра бренда — не меняется */
  --cream:#f1e9d9;
  --navy:#171d2d;
  --deep:#0f1219;
  --gold:#d2b06a;
  --navy-2:#3c4562;
  --badge-hit:#b5483f;
  --badge-recommend:#316f68;

  /* Вспомогательные нейтральные.
     Здесь только ЗНАЧЕНИЯ. Роль назначается в блоке температуры: цвет,
     назначенный ролью один раз на обе температуры, неминуемо провалится
     на одной из них - так и вышло с приглушённым текстом, который на
     кремовом фоне давал контраст 2.45:1 при норме 4.5:1. */
  --cream-bright:#fffaf0;   /* тёплый белый: заголовок поверх кадра */
  --text-muted:#a9b0c2;
  --slate:#8f96a8;
  --navy-3:#545c75;
  --ink:#20180a;
  --hair:#232a38;

  /* Типографика */
  --disp:'Garamond',Georgia,'Times New Roman',serif;
  --ui:'Montserrat',Arial,sans-serif;
  --step--1:clamp(12px,.8vw + 10px,13px);
  --step-0:clamp(15px,.3vw + 14px,16px);
  --step-1:clamp(19px,.6vw + 17px,22px);
  --step-2:clamp(24px,1.4vw + 20px,32px);
  --step-3:clamp(30px,2.6vw + 22px,46px);
  --step-4:clamp(36px,4.4vw + 24px,64px);

  /* Ритм */

  /* ── ДВИЖЕНИЕ ────────────────────────────────────────────────────────
     Салон продаёт замедление, и интерфейс обязан двигаться так же.
     До этого длительности выбирались на глаз: пятнадцать разных
     значений от 150 мс до секунды. Короткие - это скорость офисной
     программы, где важна отзывчивость; здесь она читается как рывок.

     Шкала времени. Ступени различимы на глаз (каждая примерно в полтора
     раза длиннее предыдущей) - иначе разница между ними не читается,
     и шкала вырождается в один средний темп.
       dur-1  смена состояния на месте: цвет, рамка, прозрачность
       dur-2  заметное перемещение: карточка, стрелка, подъём
       dur-3  крупное: панель, раскрытие, смена сцены
       dur-4  сценическое: завеса, наплыв кадра

     Кривые. Их две, и они отвечают на разные вопросы.
       ease       - ответ на действие человека. Трогается сразу, иначе
                    интерфейс кажется зависшим, и долго оседает.
       ease-breath - собственное движение сайта, которое никто не
                    запускал: подсказки, свечение, пульс. Симметричная:
                    выходит из покоя и возвращается в покой, без начала
                    и конца, как вдох и выдох.

     breath - период дыхательного цикла. 5.6 с - это темп спокойного
     дыхания взрослого человека (10-11 циклов в минуту). Совпадение
     не украшение: ритм, который человек узнаёт телом, успокаивает,
     а вдвое более быстрый - наоборот, подгоняет. */
  --dur-1:320ms; --dur-2:520ms; --dur-3:820ms; --dur-4:1200ms;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-breath:cubic-bezier(.45,0,.35,1);
  --breath:5.6s;

  --gap-1:8px; --gap-2:14px; --gap-3:24px; --gap-4:40px; --gap-5:64px; --gap-6:96px;
  --measure:65ch;
  --page:1180px;
}

/* Тёмная температура — витрина */
[data-temp="dark"]{
  --bg:var(--deep);
  --surface:var(--navy);
  --text:var(--cream);
  --text-soft:var(--text-muted);
  --text-dim:var(--slate);
  --line:var(--hair);
  --accent:var(--gold);
  --accent-ink:var(--ink);
}

/* Кремовая температура — чтение */
[data-temp="cream"]{
  --bg:var(--cream);
  --surface:#e7dcc5;
  --text:var(--navy);
  --text-soft:var(--navy-2);
  --text-dim:var(--navy-3);
  --line:#d8cbb0;
  /* Золото бренда на кремовом нечитаемо: 2.86:1 при норме 4.5:1, и как
     текст, и как заливка кнопки под кремовой надписью. Здесь оно взято
     в тон темнее - 5.43:1 на странице и 4.82:1 на карточке (карточка
     темнее страницы, целиться надо в неё). Палитра бренда в :root
     не тронута: тёмная температура показывает золото как есть. */
  --accent:#755920;
  --accent-ink:var(--cream);
}