/* Дизайн-токены из Figma.
   В макете две темы: k/ — детская, a/ — взрослая. */

:root {
  /* Сетка: фрейм 1440, контейнер 1200, боковые отступы 120 */
  --page-width: 1440px;
  --container-width: 1200px;
  --container-padding: 120px;

  /* Типографика */
  --font-primary: 'Manrope', sans-serif;

  /* Цвета — общие */
  --color-text: #2b2b2b;          /* text/1 */
  --color-text-muted: rgba(43, 43, 43, 0.5);
  --color-surface: #fafafa;       /* фон карточек, в Figma k/background/4 */
  --color-border: rgba(43, 43, 43, 0.1);

  /* Футера в макете нет — фон одинаково чёрный в обеих темах */
  --color-footer-bg: #000;

  /* Радиусы */
  --radius-card: 24px;
  --radius-card-sm: 16px;
  --radius-pill: 32px;

  /* Цвета — детская тема */
  --color-kids-secondary: #5a3795; /* k/secondary/1 */
  --color-kids-accent: #ffd966;    /* k/background/3 */
  --color-kids-bg: #fafafa;        /* k/background/4 */

  /* Цвета — взрослая тема */
  /* Бирюзовый из брендбука: Pantone 7474 C, в печати C100 M35 Y45 K10.
     В Figma был #10707a — экранный эквивалент пантона чуть глубже и синее. */
  --color-adult-primary: #007681;  /* a/primary/1 */
  --color-adult-bg: #f5f8fa;       /* a/background/2 */
}

/* Тема страницы задаётся классом на <body>.
   Остальные цвета (не вынесенные в переменные Figma) добавляются по ходу вёрстки секций. */

.theme-kids {
  --color-primary: var(--color-kids-secondary);
  --color-accent: var(--color-kids-accent);
  --color-bg: var(--color-kids-bg);
  /* точка в верхней строке ведёт в соседний раздел, поэтому цвет — чужой темы */
  --color-other-section: var(--color-adult-primary);
  --color-primary-light: #b8a3e0;
}

.theme-adult {
  --color-primary: var(--color-adult-primary);
  --color-bg: var(--color-adult-bg);
  --color-other-section: var(--color-kids-secondary);
  --color-primary-light: color-mix(in srgb, var(--color-primary) 55%, #fff);
}