/* ======================================
   Rampaga variables.css — v1.3
   Назначение: корневые токены проекта
   light + dark через light-dark()
   ====================================== */

:root {
  color-scheme: light dark;

  /* ===== Базовый индекс ===== */
  --index: calc(1vw + 1vh);
  /* ===== Шрифты ===== */
  --font-family-base: "Brutal", Inter, "Segoe UI", Roboto, Arial, 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-sm: 0.5rem;
  --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: light-dark(#eef2f6, #1a1e24);
  --surface-color: light-dark(#f7f9fb, #20252d);
  --surface-muted-color: light-dark(#eef3f7, #252b34);
  --surface-subtle-color: light-dark(#e8eef3, #2b3440);
  --surface-strong-color: light-dark(#dde5ea, #34404c);

  /* ===== Текст ===== */
  --text-color: light-dark(#20262d, #d8e0ea);
  --text-strong-color: light-dark(#181c22, #f3f6fa);
  --text-muted-color: light-dark(#6b7280, #9aa4b2);
  --text-soft-color: light-dark(#475569, #c4cacd); /*b5bfcb*/

  /* ===== Границы ===== */
  --border-color: light-dark(rgba(17, 24, 39, 0.08), rgba(255, 255, 255, 0.09));
  --border-subtle-color: light-dark(rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.07));

  /* ===== Акцент ===== */
  --accent-color: light-dark(#1677c8, #3aa2ff);
  --accent-hover-color: light-dark(#0f6f8f, #5ab3ff);
  --accent-soft-color: light-dark(rgba(22, 119, 200, 0.12), rgba(58, 162, 255, 0.16));

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

  /* ===== Ссылки ===== */
  --article-link-color: light-dark(#1677c8, #3aa2ff);
  --article-link-visited-color: light-dark(#5f6fd9, #9aa7ff);

  /* ===== Код и карточки ===== */
  --article-code-background-color: light-dark(rgba(31, 41, 55, 0.05), rgba(255, 255, 255, 0.05));
  --article-card-background-color: light-dark(rgba(31, 41, 55, 0.035), rgba(255, 255, 255, 0.04));

  /* ===== Publisher panel ===== */
  --publisher-panel-background: light-dark(rgba(250, 252, 255, 0.94), rgba(18, 22, 29, 0.94));
  --publisher-panel-border-color: light-dark(rgba(15, 23, 42, 0.1), rgba(255, 255, 255, 0.08));
  --publisher-panel-shadow: light-dark(0 20px 50px rgba(15, 23, 42, 0.14), 0 20px 50px rgba(0, 0, 0, 0.36));
  --publisher-panel-backdrop: blur(18px);
  --publisher-card-background: light-dark(#ffffff, #202733);
  --publisher-card-border-color: light-dark(rgba(15, 23, 42, 0.08), rgba(255, 255, 255, 0.08));
  --publisher-card-selected-background: light-dark(rgba(22, 119, 200, 0.08), rgba(58, 162, 255, 0.12));
  --publisher-card-selected-border-color: light-dark(rgba(22, 119, 200, 0.26), rgba(90, 179, 255, 0.3));
  --publisher-idle-background: light-dark(#eef2f6, #2d3642);
  --publisher-idle-color: light-dark(#516071, #b6c0cf);
  --publisher-pending-background: light-dark(rgba(57, 99, 219, 0.12), rgba(95, 164, 255, 0.18));
  --publisher-pending-color: light-dark(#3154b5, #8ebfff);
  --publisher-success-background: light-dark(rgba(24, 144, 92, 0.12), rgba(40, 199, 111, 0.16));
  --publisher-success-color: light-dark(#0f7a4e, #7ae6b2);
  --publisher-error-background: light-dark(rgba(220, 38, 38, 0.1), rgba(255, 107, 107, 0.16));
  --publisher-error-color: light-dark(#b42318, #ff9d9d);
  --publisher-disabled-background: light-dark(rgba(100, 116, 139, 0.12), rgba(148, 163, 184, 0.14));
  --publisher-disabled-color: light-dark(#667085, #bbc5d3);
  --publisher-button-primary-background: light-dark(#111827, #eff3f8);
  --publisher-button-primary-color: light-dark(#ffffff, #15202b);
  --publisher-button-secondary-background: light-dark(#e7eef6, #283241);
  --publisher-button-secondary-color: light-dark(#203041, #f2f5f9);
  --publisher-button-ghost-background: transparent;
  --publisher-button-ghost-color: var(--text-soft-color);
  --publisher-switch-background: light-dark(#d7e0ea, #3b4656);
  --publisher-switch-active-background: light-dark(#1677c8, #3aa2ff);
  --publisher-switch-thumb: #ffffff;
  --publisher-note-background: light-dark(rgba(15, 23, 42, 0.03), rgba(255, 255, 255, 0.04));
  --publisher-note-border-color: light-dark(rgba(15, 23, 42, 0.06), rgba(255, 255, 255, 0.06));
}
:root[data-theme="light"] {
  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;
}

:root[data-theme="auto"] {
  color-scheme: light dark;
}