/* Сила Рода · общие дизайн-токены v1.1.0
Семейная палитра всех проектов Екатерины Белой. Приложения подключают
файл и берут отсюда общие цвета и шрифты, а собственный характер
держат через --sr-accent (свой цвет у каждого курса, см. ниже).
Подключение:
Шрифты — отдельно:
Затем на или : data-sr-product="runes" — и --sr-accent
станет цветом курса. Переменные ничего не перекрашивают сами:
приложение решает, где их использовать. */
:root {
/* Бумага и чернила — основа всех светлых экранов */
--sr-paper: #fffaf4;
--sr-canvas: #f7f0e7;
--sr-sand: #efe2d4;
--sr-ink: #33251d;
--sr-muted: #776557;
--sr-line: rgba(120, 79, 37, .16);
/* Золото — общий фирменный акцент семейства */
--sr-gold: #b87a34;
--sr-gold-soft: #d7ae70;
--sr-gold-deep: #9f6429;
/* Ночь — тёмные поверхности и шапка */
--sr-night: #241a14;
--sr-night-2: #33261d;
--sr-night-ink: #f3e6d3;
--sr-night-muted: #c9b59c;
/* Цвета курсов */
--sr-rod: #9a6a3a;
--sr-plamya: #c04828;
--sr-taro: #76603d;
--sr-runes: #744153;
--sr-accent: var(--sr-gold);
/* Шрифты: заголовки — Cormorant Garamond, текст — Manrope */
--sr-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
--sr-sans: Manrope, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
/* Фон страницы — единственное, чем курсы отличаются друг от друга
внешне. Три точки градиента, как на лендинге:
background: var(--sr-page); (или сами --sr-bg-1..3) */
--sr-bg-1: #fffdf9;
--sr-bg-2: #f7f0e7;
--sr-bg-3: #efe2d4;
--sr-page: radial-gradient(circle at 50% -10%, var(--sr-bg-1) 0, var(--sr-bg-2) 42%, var(--sr-bg-3) 100%);
/* Поверхности и кнопки лендинга */
--sr-panel: linear-gradient(145deg, rgba(255, 253, 249, .92), rgba(248, 239, 229, .84));
--sr-glass: rgba(255, 250, 244, .82);
--sr-button: linear-gradient(180deg, #c58b43, #a86427);
--sr-button-border: #e1bb7f;
--sr-button-ink: #fff9ef;
--sr-button-shadow: 0 8px 24px rgba(146, 86, 25, .18);
/* Формы */
--sr-radius-s: 10px;
--sr-radius-m: 16px;
--sr-radius-l: 24px;
--sr-radius-pill: 999px;
--sr-shadow: 0 20px 70px rgba(71, 46, 25, .10);
--sr-touch: 44px;
}
/* Цвет курса и тон его фона. Всё остальное у курсов общее. */
[data-sr-product="rod"] { --sr-accent: var(--sr-rod); --sr-bg-1: #fdf9f2; --sr-bg-2: #f2e7d8; --sr-bg-3: #e6d4bf; }
[data-sr-product="plamya"] { --sr-accent: var(--sr-plamya); --sr-bg-1: #fffaf6; --sr-bg-2: #f8ece4; --sr-bg-3: #f0ddd0; }
[data-sr-product="taro"] { --sr-accent: var(--sr-taro); --sr-bg-1: #fcfaf3; --sr-bg-2: #f2ede0; --sr-bg-3: #e6dfca; }
[data-sr-product="runes"] { --sr-accent: var(--sr-runes); --sr-bg-1: #fdf9fb; --sr-bg-2: #f5ecf0; --sr-bg-3: #eadbe3; }