/* ======================================
   Rampaga variables.css — v1.2
   Назначение: корневые токены проекта
   ====================================== */

:root {
  color-scheme: light;

  /* ===== Шрифты ===== */
  --font-family-base: "Brutal", sans-serif;
  --font-family-brand: "Fredoka", sans-serif;
  --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  /* ===== Базовые размеры ===== */
  --layout-max-width: 1140px;
  --layout-content-width: 720px;
  --header-height: 40px;
  --layout-padding-inline: 1.5625rem;

  /* ===== Базовая типографика ===== */
  --font-size-base: clamp(1rem, 1rem + 0.015vw, 1.125rem);
  --font-size-small: clamp(0.875rem, 0.81rem + 0.011vw, 1rem);
  --font-size-caption: clamp(0.75rem, 0.685rem + 0.011vw, 0.875rem);

  --line-height-base: 1.6;
  --line-height-tight: 1.3;

  /* ===== Отступы ===== */
  --space-2xs: clamp(0.25rem, 0.2rem + 0.3vw, 0.5rem);
  --space-xs: clamp(0.5rem, 0.4rem + 0.4vw, 0.75rem);
  --space-sm: clamp(1rem, 0.8rem + 0.6vw, 1.5rem);
  --space-md: clamp(2rem, 1.5rem + 1vw, 3rem);

  /* ===== Скругления ===== */
  --radius-md: 0.875rem;
  --radius-lg: 1.125rem;
  --radius-pill: 999px;
  --radius-round: 50%;

  /* ===== Анимация ===== */
  --transition-fast: 150ms ease;
  --transition-base: 300ms ease-out;

  /* ===== Иконки ===== */
  --icon-size: 1.25rem;

  /* ===== Базовые цвета ===== */
  --page-background-color: #eef2f6;
  --surface-color: #f7f9fb;
  --surface-muted-color: #eef3f7;
  --surface-subtle-color: #e8eef3;
  --surface-strong-color: #dde5ea;

  --text-color: #20262d;
  --text-strong-color: #181c22;
  --text-muted-color: #6b7280;
  --text-soft-color: #475569;

  --border-color: rgba(17, 24, 39, 0.08);
  --border-subtle-color: rgba(0, 0, 0, 0.06);

  --accent-color: #1677c8;
  --accent-hover-color: #0f6f8f;
  --accent-soft-color: rgba(22, 119, 200, 0.12);

  /* ===== Токены страницы материала ===== */
  --article-text-color: #1f2933;
  --article-title-color: rgba(22, 21, 21, 0.92);
  --article-muted-color: rgba(64, 72, 82, 0.72);
  --article-rule-color: rgba(68, 66, 66, 0.12);

  --article-link-color: #1677c8;
  --article-link-visited-color: #5f6fd9;

  --article-code-background-color: rgba(31, 41, 55, 0.05);
  --article-card-background-color: rgba(31, 41, 55, 0.035);
}