/* Golos Text: SIL Open Font License, see fonts/OFL.txt. */
@font-face { font-family: 'Golos Text'; src: url('./fonts/GolosText.ttf') format('truetype'); font-weight: 400 900; font-display: swap; }
:root { --font-golos: 'Golos Text'; }
/*
 * Токены бренда LDC.
 *
 * Визуальный язык — тот, что сейчас типичен для СНГ и Казахстана: одна
 * геометрическая гротеска на весь сайт с широким диапазоном насыщенности,
 * крупные радиусы, много воздуха, мягкие карточки, один яркий акцент.
 * Референсы: deka-dance.ru (Cera Pro, радиусы 10/20/30, пилюли),
 * project-nsk.ru (крупный дисплей, тёплый акцент).
 *
 * Базовый цвет бренда — #17737F, вокруг него собрана вся палитра.
 * Все пары «текст на фоне» проверены на контраст: минимум 4.5:1.
 */

:root {
  color-scheme: light;
  --stage: oklch(0.34 0.05 205);
  --stage-ink: oklch(0.98 0.008 195);
  --electric: oklch(0.91 0.15 126);
  --on-electric: oklch(0.28 0.045 155);
  --radius-md: 16px;
  /* --- светлая тема --- */
  --ground: #f4f7f7;
  --surface: oklch(0.997 0.002 195);
  --surface-2: #e8f0f0;

  /* line — разделители и рамки карточек, декоративные.
     line-strong — рамки полей ввода и прочих управляющих элементов,
     им нужно 3:1, иначе контрол не виден слабовидящим. */
  --line: #d3e0e1;
  --line-strong: #849899;

  --ink: #12211f;
  --ink-2: #4c6265;
  --ink-3: #5d7072;

  --brand: #17737f;
  --brand-hover: #115a64;
  --brand-tint: #e1eff0;
  --on-brand: #ffffff;

  /* Тёплый акцент — дополнительный к бирюзовому, для акцентных плашек
     и второстепенных действий. Намеренно темнее «кораллового» из
     референсов: на их оттенке белый текст не дотягивает до 4.5:1. */
  --warm: #b8431f;
  --warm-tint: #fbeae3;
  --on-warm: #ffffff;

  --calm: #2e6b56;
  --gold: #87610f;
  --ok: #1c6e52;
  --danger: #b3382d;

  --shadow-sm: 0 1px 2px rgba(18, 33, 31, 0.06);
  --shadow: 0 4px 16px rgba(18, 33, 31, 0.08);
  --shadow-lg: 0 12px 40px rgba(18, 33, 31, 0.1);

  /* --- типографика --- */
  --font-body: var(--font-golos), -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: var(--font-golos), -apple-system, 'Segoe UI', Roboto, sans-serif;

  --step--1: 0.875rem;
  --step-0: 1rem;
  --step-1: 1.125rem;
  --step-2: clamp(1.35rem, 2vw, 1.6rem);
  --step-3: clamp(1.75rem, 3.2vw, 2.4rem);
  --step-4: clamp(2.4rem, 5.5vw, 3.9rem);
  --step-5: clamp(3rem, 8vw, 5.5rem);

  /* --- ритм --- */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;

  /* Крупные радиусы — определяющая черта этого стиля. */
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  --measure: 60ch;
  --container: 1180px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --ground: #0c1618;
    --surface: #122123;
    --surface-2: #1a2e30;
    --line: #263c3e;
    --line-strong: #5c7173;
    --ink: #e7f0f0;
    --ink-2: #9eb3b4;
    --ink-3: #8a9fa1;
    --brand: #45b2be;
    --brand-hover: #63c4ce;
    --brand-tint: #10333a;
    --on-brand: #04201f;
    --warm: #ff8b67;
    --warm-tint: #2e150e;
    --on-warm: #2b0f06;
    --calm: #6fbf9e;
    --gold: #d0a44e;
    --ok: #63be9a;
    --danger: #f08a7f;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.5);
  }
}

:root[data-theme='dark'] {
  color-scheme: dark;
  --ground: #0c1618;
  --surface: #122123;
  --surface-2: #1a2e30;
  --line: #263c3e;
  --line-strong: #5c7173;
  --ink: #e7f0f0;
  --ink-2: #9eb3b4;
  --ink-3: #8a9fa1;
  --brand: #45b2be;
  --brand-hover: #63c4ce;
  --brand-tint: #10333a;
  --on-brand: #04201f;
  --warm: #ff8b67;
  --warm-tint: #2e150e;
  --on-warm: #2b0f06;
  --calm: #6fbf9e;
  --gold: #d0a44e;
  --ok: #63be9a;
  --danger: #f08a7f;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.5);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 90px;
  scroll-padding-bottom: var(--cookie-panel-height, 0px);
}

body {
  padding-bottom: var(--cookie-panel-height, 0px);
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  line-height: 1.06;
  letter-spacing: -0.025em;
  text-wrap: balance;
  margin: 0;
}

h1 {
  font-weight: 800;
}

h2,
h3 {
  font-weight: 700;
}

p {
  margin: 0;
  max-width: var(--measure);
}

a {
  color: inherit;
}

img {
  max-width: 100%;
  height: auto;
}

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Long localized words and increased text size must stay within their container. */
h1,
h2,
h3 {
  overflow-wrap: anywhere;
  max-width: 100%;
}
button,
input,
select,
textarea {
  font: inherit;
}
/* Keep text entry readable on phones and prevent iOS focus zoom. */
@media (max-width: 760px) {
  input:not([type='checkbox']):not([type='radio']),
  select,
  textarea {
    font-size: max(1rem, 16px);
  }
}
.skip-link {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--surface);
  color: var(--brand);
  transform: translateY(-200%);
}
.skip-link:focus {
  transform: none;
}

::selection {
  background: var(--electric);
  color: var(--on-electric);
}
main {
  min-height: 55vh;
}