/* ==========================================================================
   VIKNA.TECH — Design tokens
   --------------------------------------------------------------------------
   Мова дизайну: технічне креслення.
   Нуль заокруглень, нуль м'яких тіней. Структура тримається на лініях 1px,
   кутових засічках і моноширинних числах — як на робочому кресленні.
   ========================================================================== */

:root {
  /* --- Колір: база ------------------------------------------------------ */
  --c-ink-900: #050d15;
  --c-ink-800: #0a1420;
  --c-ink-700: #10202f;
  --c-ink-600: #1a3247;
  --c-ink-500: #274a66;

  --c-slate-600: #40596e;
  --c-slate-500: #57708a;
  --c-slate-400: #8ba0b2;
  --c-slate-300: #b4c5d2;
  --c-slate-200: #d6e0e8;

  --c-line: #dde5eb;
  --c-line-strong: #b9c8d4;
  --c-mist: #f1f5f8;
  --c-mist-2: #e7eef3;
  --c-white: #ffffff;

  /* --- Колір: бренд ------------------------------------------------------ */
  --c-accent: #ff5a1f;          /* тепло: лінії, позначки, декор */
  --c-accent-600: #e84708;
  --c-accent-700: #bf3a07;      /* акцентний ТЕКСТ на світлому: контраст 5,4 */
  --c-accent-cta: #d0430a;      /* ЗАЛИВКА під білим текстом: контраст 4,7 */
  --c-accent-100: #fff0e9;

  --c-cool: #128ba8;            /* скло, холод ззовні */
  --c-cool-strong: #0d6f88;     /* під білим текстом */
  --c-cool-100: #e6f4f8;

  --c-ok: #0a7a4f;
  --c-ok-100: #e4f4ed;
  --c-warn: #b57900;
  --c-danger: #cc3a3a;

  /* --- Семантичні ролі --------------------------------------------------- */
  --bg: var(--c-white);
  --bg-soft: var(--c-mist);
  --bg-dark: var(--c-ink-800);
  --text: var(--c-ink-800);
  --text-soft: var(--c-slate-600);
  --text-mute: var(--c-slate-500);
  --text-on-dark: #e8f1f7;
  --text-on-dark-soft: #93aec2;
  --border: var(--c-line);

  /* --- Креслярська сітка -------------------------------------------------- */
  --grid-line: rgba(39, 74, 102, 0.07);
  --grid-line-dark: rgba(255, 255, 255, 0.055);
  --grid-step: 56px;

  /* --- Скло --------------------------------------------------------------- */
  --glass-1: #d5e6f1;
  --glass-2: #f2f9fd;
  --glass-3: #bcd6e8;

  /* --- Типографіка --------------------------------------------------------
     Заголовки й текст — Manrope. Усі числа, коди, підписи — моно.
     Це головна фішка: сайт читається як технічна документація.
  ----------------------------------------------------------------------- */
  --font: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", ui-monospace, "Cascadia Mono",
               Consolas, "Liberation Mono", monospace;

  --fs-display: clamp(2.6rem, 1.3rem + 5.2vw, 5.4rem);
  --fs-h1: clamp(2.05rem, 1.3rem + 3.2vw, 3.8rem);
  --fs-h2: clamp(1.6rem, 1.2rem + 2vw, 2.8rem);
  --fs-h3: clamp(1.2rem, 1.08rem + 0.8vw, 1.6rem);
  --fs-h4: clamp(1.02rem, 0.98rem + 0.4vw, 1.2rem);
  --fs-lead: clamp(1.02rem, 0.97rem + 0.45vw, 1.22rem);
  --fs-body: 1rem;
  --fs-sm: 0.9125rem;
  --fs-xs: 0.8125rem;
  --fs-2xs: 0.72rem;

  --lh-tight: 1.02;
  --lh-head: 1.1;
  --lh-snug: 1.32;
  --lh-body: 1.62;

  --tr-tight: -0.04em;
  --tr-head: -0.022em;
  --tr-mono: 0.02em;
  --tr-wide: 0.14em;

  /* --- Простір ------------------------------------------------------------ */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.25rem;
  --s-6: 1.5rem;
  --s-8: 2rem;
  --s-10: 2.5rem;
  --s-12: 3rem;
  --s-16: 4rem;
  --s-20: 5rem;
  --s-24: 6rem;

  --section-y: clamp(3.5rem, 2rem + 6vw, 7rem);
  --container: 1320px;
  --container-narrow: 900px;
  --gutter: clamp(1rem, 0.4rem + 2.6vw, 2.5rem);

  /* --- Форма: усе прямокутне ---------------------------------------------- */
  --r-xs: 0;
  --r-sm: 0;
  --r-md: 0;
  --r-lg: 0;
  --r-xl: 0;
  --r-full: 0;

  --bw: 1px;
  --bw-2: 2px;

  /* --- «Тіні»: тільки там, де є реальний шар над сторінкою ------------------ */
  --sh-xs: none;
  --sh-sm: none;
  --sh-md: none;
  --sh-lg: none;
  --sh-xl: 0 24px 70px rgba(5, 13, 21, 0.34);
  --sh-accent: none;
  --sh-hard: 5px 5px 0 var(--c-ink-800);

  /* --- Рух ---------------------------------------------------------------- */
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 0.14s;
  --t: 0.24s;
  --t-slow: 0.45s;

  /* --- Шари --------------------------------------------------------------- */
  --z-base: 1;
  --z-sticky: 50;
  --z-header: 100;
  --z-drawer: 200;
  --z-modal: 300;
  --z-toast: 400;
}

/* Темні блоки: акцентний текст на темному має бути СВІТЛИМ, а не тьмяним,
   а «приглушений» — світлішим. Перевизначаємо токени, а не кожне правило. */
.hero,
.constructor-band,
.cta-band,
.promo-card--dark,
.summary__total,
.calc-bar,
.footer,
.topbar {
  --c-accent-700: var(--c-accent);
  --text-mute: var(--c-slate-400);
}

/* ...але світла картка всередині темного блоку повертає світлі значення */
.cta-band__form,
.modal__dialog,
.summary,
.calc__panel {
  --c-accent-700: #bf3a07;
  --text-mute: var(--c-slate-500);
}

/* Темна секція — перевизначає ролі, а не кожен клас */
.is-dark {
  --bg: var(--c-ink-800);
  --bg-soft: var(--c-ink-700);
  --text: var(--text-on-dark);
  --text-soft: var(--text-on-dark-soft);
  --text-mute: #6f8ba1;
  --border: rgba(255, 255, 255, 0.14);
  --grid-line: var(--grid-line-dark);
  color: var(--text);
  background: var(--bg);
}