/* ==========================================================================
   ВИЕРКОМ · токены оформления
   Палитра, шрифты и шкалы. Значения цвета берутся из брендбука v8,
   раздел 3 «Фирменные цвета»; ничего не подбирается на глаз.
   ========================================================================== */

/* --- шрифты, все свои, без обращений к сторонним сервисам --------------- */

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-variable-italic.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- фирменные константы, одинаковые в обеих темах ------------------- */
  --brand-emerald: #009960;      /* Viercom Emerald Metallic */
  --brand-blue: #0055cc;         /* Viercom Blue Metallic */
  --brand-dark: #0b1120;         /* Viercom Dark */
  --brand-silver: #aaa9b0;       /* Viercom Silver */
  --brand-emerald-deep: #006b42; /* нижняя точка градиента дуги знака */
  --brand-blue-bright: #3b82f6;  /* верхняя точка градиента черты знака */
  --brand-blue-deep: #093173;    /* нижняя точка градиента черты знака */

  /* Классы квалификации. Свои цвета, не из основной палитры:
     класс — расчётная величина, а не акцент, и путать его с фирменным
     изумрудом нельзя. */
  --class-bronze: #a9713f;
  --class-silver: #9aa3af;
  --class-gold: #d6a114;
  --class-platinum: #5f6b7e;

  /* --- служебные цвета брендбука --------------------------------------- */
  --amber: #f59e0b;
  --red: #e53e3e;

  /* --- типографика ------------------------------------------------------ */
  --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;

  /* Модульная шкала 1.25 от основания 16 px, с ограничением по ширине
     экрана: заголовки на телефоне не должны переносить слово по слогам. */
  --text-xs: 0.75rem;    /* 12 */
  --text-sm: 0.875rem;   /* 14 — навигация */
  --text-base: 1rem;     /* 16 — основной текст, требование брендбука */
  --text-lg: 1.125rem;   /* 18 */
  --text-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.25rem + 1.1vw, 2rem);
  --text-3xl: clamp(1.875rem, 1.4rem + 2vw, 2.75rem);
  --text-4xl: clamp(2.25rem, 1.5rem + 3.2vw, 3.75rem);

  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.65;

  /* --- шкала отступов, шаг 4 px ---------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* --- сетка ------------------------------------------------------------ */
  --container: 1200px;
  --container-narrow: 800px;
  --gutter: clamp(1rem, 4vw, 2.5rem);

  /* --- прочее ----------------------------------------------------------- */
  --radius: 8px;
  --radius-sm: 4px;
  --radius-lg: 16px;
  --header-height: 72px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ==========================================================================
   Тёмная тема — по умолчанию.
   Брендбук описывает её как штатную: фон #0B1120, текст #E0E0EA.
   ========================================================================== */

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

  --bg: #0b1120;
  --bg-raised: #111a2e;
  --bg-sunken: #070c17;
  --bg-inset: rgba(255, 255, 255, 0.03);

  --text: #e0e0ea;
  --text-strong: #ffffff;
  --text-muted: #aaa9b0;
  --text-faint: #6b7280;

  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.16);

  /* Синий поднят до #3B82F6: фирменный #0055CC на фоне #0B1120
     не добирает контраст. Обе точки есть в градиенте знака Power. */
  --accent: #00b473;
  --accent-ink: #009960;
  --accent-2: #3b82f6;

  --tint-emerald: rgba(0, 153, 96, 0.1);
  --tint-blue: rgba(59, 130, 246, 0.1);
  --tint-amber: rgba(245, 158, 11, 0.09);

  --on-accent: #06210f;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4);

  /* Схемы участков светлые: в тёмной теме им нужна светлая подложка,
     а не инверсия — инвертированная изометрия читается плохо. */
  --figure-bg: #f2f4f8;
}

/* ==========================================================================
   Светлая тема — строго по разделу «Веб-сайт» брендбука:
   фон белый либо #F5F6FA, акценты Emerald и Blue.
   ========================================================================== */

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

  --bg: #ffffff;
  --bg-raised: #f5f6fa;
  --bg-sunken: #eceef5;
  --bg-inset: rgba(11, 17, 32, 0.03);

  --text: #16203a;
  --text-strong: #0b1120;
  --text-muted: #5a5a66;
  --text-faint: #8b8b96;

  --border: rgba(11, 17, 32, 0.12);
  --border-strong: rgba(11, 17, 32, 0.22);

  --accent: #009960;
  --accent-ink: #007a4d;
  --accent-2: #0055cc;

  --tint-emerald: #e6f7f0;
  --tint-blue: #e6f2ff;
  --tint-amber: #fdf4e3;

  --on-accent: #ffffff;
  --shadow: 0 1px 3px rgba(11, 17, 32, 0.08);

  --figure-bg: #ffffff;
}