/* Общая дизайн-система «Инженерный» для ogefizika.ru и malikov-repetitor.ru.
   Источник правды — этот файл; deploy.sh копирует его и шрифты на лендинг. */

/* ---------- Шрифты: IBM Plex (SIL OFL), свои файлы, латиница + кириллица ---------- */
@font-face { font-family: 'IBM Plex Sans'; font-weight: 400; font-display: swap; src: url(fonts/ibm-plex-sans-cyrillic-400-normal.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 400; font-display: swap; src: url(fonts/ibm-plex-sans-latin-400-normal.woff2) format('woff2'); 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+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+2190-21FF, U+20BD; }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 500; font-display: swap; src: url(fonts/ibm-plex-sans-cyrillic-500-normal.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 500; font-display: swap; src: url(fonts/ibm-plex-sans-latin-500-normal.woff2) format('woff2'); 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+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+2190-21FF, U+20BD; }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 600; font-display: swap; src: url(fonts/ibm-plex-sans-cyrillic-600-normal.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 600; font-display: swap; src: url(fonts/ibm-plex-sans-latin-600-normal.woff2) format('woff2'); 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+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+2190-21FF, U+20BD; }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 700; font-display: swap; src: url(fonts/ibm-plex-sans-cyrillic-700-normal.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 700; font-display: swap; src: url(fonts/ibm-plex-sans-latin-700-normal.woff2) format('woff2'); 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+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+2190-21FF, U+20BD; }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 500; font-display: swap; src: url(fonts/ibm-plex-mono-cyrillic-500-normal.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 500; font-display: swap; src: url(fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2'); 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+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+2190-21FF, U+20BD; }

/* ---------- Токены ---------- */
:root {
  color-scheme: light dark;
  --font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --bg: #f4f6f8;
  --surface: #ffffff;
  --surface-2: #eef1f5;
  --text: #0b1324;
  --text-2: #465061;
  --line: #d8dde5;
  --line-strong: #b4bdca;
  --field: #7d8797;

  --navy: #0b1f3a;
  --on-navy: #eef3fa;
  --on-navy-2: #a8b7cd;
  --navy-line: rgba(255, 255, 255, 0.16);
  --grid-minor: rgba(255, 255, 255, 0.045);
  --grid-major: rgba(255, 255, 255, 0.085);

  --accent: #1e4fd8;
  --accent-hover: #163eb0;
  --on-accent: #ffffff;
  --accent-soft: #e8eefc;
  --accent-on-navy: #8fb0ff;

  --good: #137a3a;
  --warn: #9a5800;
  --bad: #b42318;

  --radius: 4px;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --t: 160ms;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0a0e15;
    --surface: #111722;
    --surface-2: #172030;
    --text: #e7ebf1;
    --text-2: #a1abb9;
    --line: #253041;
    --line-strong: #3a4659;
    --field: #64718a;

    --navy: #0b1930;
    --on-navy: #eef3fa;
    --on-navy-2: #a8b7cd;

    --accent: #7ba2ff;
    --accent-hover: #9cbaff;
    --on-accent: #08101f;
    --accent-soft: #17233a;
    --accent-on-navy: #8fb0ff;

    --good: #4ade80;
    --warn: #fbbf24;
    --bad: #f87171;
  }
}

/* ---------- База ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 17px/1.6 var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.015em; line-height: 1.15; text-wrap: balance; }
p { margin: 0; }
a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
img { max-width: 100%; display: block; }

.mono { font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.label {
  font-family: var(--font-mono); font-weight: 500; font-size: 13px; line-height: 1.4;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-2);
}

/* ---------- Кнопки ---------- */
.btn, button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 22px;
  font: 600 16px/1.2 var(--font-sans); letter-spacing: 0;
  border: 1px solid transparent; border-radius: var(--radius);
  text-decoration: none; cursor: pointer; touch-action: manipulation;
  transition: background-color var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease);
}
.btn.primary, button.primary, .primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.btn.primary:hover, button.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn.secondary, button.secondary { background: transparent; color: var(--text); border-color: var(--field); }
.btn.secondary:hover, button.secondary:hover { border-color: var(--text); }
button:disabled { opacity: 0.5; cursor: default; }
.btn svg { width: 20px; height: 20px; flex: none; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- Поля ---------- */
.field { display: grid; gap: 6px; }
.field > span { font-size: 14px; font-weight: 500; color: var(--text-2); }
input:not([type]), input[type="text"], input[type="tel"], select {
  width: 100%; min-height: 50px; padding: 0 14px;
  font: 400 17px/1.4 var(--font-sans); color: var(--text);
  background: var(--surface); border: 1px solid var(--field); border-radius: var(--radius);
  transition: border-color var(--t) var(--ease);
}
input:hover, select:hover { border-color: var(--text-2); }
input:focus-visible, select:focus-visible { outline-offset: 0; border-color: var(--accent); }

[hidden] { display: none !important; }

/* Сетка-«чертёж» для тёмно-синих блоков */
.blueprint {
  background-color: var(--navy);
  background-image:
    linear-gradient(var(--grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
    linear-gradient(var(--grid-minor) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-minor) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  background-position: -1px -1px;
  color: var(--on-navy);
}

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