/* Дизайн-система «Чертёж» — токены. Источник: дизайн-система.md */

@font-face {
  font-family: "Inter Tight";
  src: url("../fonts/inter-tight-cyrillic.woff2") format("woff2-variations"), url("../fonts/inter-tight-cyrillic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Inter Tight";
  src: url("../fonts/inter-tight-latin.woff2") format("woff2-variations"), url("../fonts/inter-tight-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-cyrillic.woff2") format("woff2-variations"), url("../fonts/jetbrains-mono-cyrillic.woff2") format("woff2");
  font-weight: 100 800;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-latin.woff2") format("woff2-variations"), url("../fonts/jetbrains-mono-latin.woff2") format("woff2");
  font-weight: 100 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Exo 2 — только для строки «Инжиниринговая компания» в логотипе */
@font-face {
  font-family: "Exo 2";
  src: url("../fonts/exo2-cyrillic-700.woff2") format("woff2");
  font-weight: 700;
  font-display: block;
  unicode-range: U+0400-045F;
}

:root {
  /* Красный */
  --red-50: #FDECEE;
  --red-100: #FAD0D5;
  --red-300: #F07585;
  --red-400: #F0485C;
  --red-500: #E0283F;
  --red-600: #D51F35;
  --red-700: #B3172B;
  --red-800: #8E1222;
  --red-900: #5E0B16;

  /* Нейтральные */
  --paper: #F4F1EC;
  --paper-2: #EAE5DD;
  --white: #FCFCFA;
  --ink: #0F1012;
  --ink-2: #1A1B1E;
  --graphite: #2B2D33;
  --grey-600: #6B6E76;
  --grey-500: #8A8D95;
  --grey-300: #C9C5BE;
  --line: rgba(15, 16, 18, 0.12);
  --line-dark: rgba(252, 252, 250, 0.14);

  /* Отрасли */
  --ind-energy: #5C4F4A;
  --ind-atom: #4A5A6A;
  --ind-chem: #7E4426;
  --ind-machine: #565B50;
  --ind-water: #3F5560;
  --ind-science: #5D4A5A;
  --ind-retail: #635A50;
  --ind-rail: #3F4D45;

  /* Семантика (светлая тема) */
  --bg: var(--paper);
  --bg-alt: var(--paper-2);
  --fg: var(--ink);
  --fg-muted: var(--grey-600);
  --accent: var(--red-600);
  --accent-hover: var(--red-700);
  --accent-text: var(--red-600);
  --on-accent: var(--white);
  --border: var(--line);

  /* Шрифты */
  --font-sans: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;

  /* Шкала */
  --fs-display-xxl: clamp(72px, 14vw, 240px);
  --fs-display-xl: clamp(56px, 10vw, 168px);
  --fs-display: clamp(44px, 7vw, 112px);
  --fs-h1: clamp(38px, 5vw, 80px);
  --fs-h2: clamp(30px, 3.9vw, 60px);
  --fs-statement: clamp(26px, 3.9vw, 56px);
  --fs-h3: clamp(21px, 1.8vw, 26px);
  --fs-lead: clamp(18px, 1.4vw, 20px);
  --fs-body: 16px;
  --fs-body-s: 14px;
  --fs-label: 12px;
  --fs-mono: 13px;
  --fs-mono-xl: clamp(40px, 5vw, 80px);

  /* Сетка */
  --margin: clamp(20px, 3.3vw, 64px);
  --gutter: clamp(12px, 1.7vw, 24px);
  --cols: 12;
  --max: 1760px;
  --measure: 64ch;
  --measure-wide: 900px;

  /* Отступы */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px;
  --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --s-11: 192px;
  --section-y: clamp(96px, 12vw, 192px);

  /* Форма */
  --r-0: 0;
  --r-card: 16px;
  --r-pill: 999px;
  --stroke: 1px;
  --stroke-strong: 2px;

  /* Движение */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --t-fast: 200ms;
  --t-base: 400ms;
  --t-slow: 800ms;
  --t-page: 1200ms;

  --header-h: 72px;
  --dock-safe: 104px; /* 24 отступ + 56 нижняя навигация + 24 */
  color-scheme: light;
}

@media (max-width: 1023px) { :root { --cols: 8; } }
@media (max-width: 639px)  { :root { --cols: 4; --header-h: 64px; } }

/* Тёмная тема: по системе, если пользователь не выбрал светлую, и по переключателю */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--ink);
    --bg-alt: var(--ink-2);
    --fg: var(--white);
    --fg-muted: var(--grey-500);
    --accent-text: var(--red-400);
    --border: var(--line-dark);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: var(--ink);
  --bg-alt: var(--ink-2);
  --fg: var(--white);
  --fg-muted: var(--grey-500);
  --accent-text: var(--red-400);
  --border: var(--line-dark);
  color-scheme: dark;
}

/* Поверхности секций */
.surface-light { --bg: var(--paper); --bg-alt: var(--paper-2); --fg: var(--ink); --fg-muted: var(--grey-600); --border: var(--line); --accent-text: var(--red-600); }
.surface-light-2 { --bg: var(--paper-2); --bg-alt: var(--paper); --fg: var(--ink); --fg-muted: var(--grey-600); --border: var(--line); --accent-text: var(--red-600); }
.surface-dark { --bg: var(--ink); --bg-alt: var(--ink-2); --fg: var(--white); --fg-muted: var(--grey-500); --border: var(--line-dark); --accent-text: var(--red-400); }
.surface-red { --bg: var(--red-600); --bg-alt: var(--red-700); --fg: var(--white); --fg-muted: var(--white); --border: rgba(252, 252, 250, .28); --accent: var(--ink); --accent-hover: var(--graphite); --accent-text: var(--white); }

/* В тёмной теме светлые секции становятся тёмными, красные остаются */
:root[data-theme="dark"] .surface-light,
:root[data-theme="dark"] .surface-light-2 { --bg: var(--ink); --bg-alt: var(--ink-2); --fg: var(--white); --fg-muted: var(--grey-500); --border: var(--line-dark); --accent-text: var(--red-400); }
:root[data-theme="dark"] .surface-light-2 { --bg: var(--ink-2); --bg-alt: var(--ink); }
:root[data-theme="dark"] .surface-dark { --bg: #08090A; --bg-alt: var(--ink); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .surface-light,
  :root:not([data-theme="light"]) .surface-light-2 { --bg: var(--ink); --bg-alt: var(--ink-2); --fg: var(--white); --fg-muted: var(--grey-500); --border: var(--line-dark); --accent-text: var(--red-400); }
  :root:not([data-theme="light"]) .surface-light-2 { --bg: var(--ink-2); --bg-alt: var(--ink); }
  :root:not([data-theme="light"]) .surface-dark { --bg: #08090A; --bg-alt: var(--ink); }
}