/* Дизайн-токены «Графит и объектив». Описание — docs/design-system.md */

@font-face { font-family: "Unbounded"; src: url(../fonts/unbounded-cyr.woff2) format("woff2"); font-weight: 200 900; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Unbounded"; src: url(../fonts/unbounded-lat.woff2) format("woff2"); font-weight: 200 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Onest"; src: url(../fonts/onest-cyr.woff2) format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Onest"; src: url(../fonts/onest-lat.woff2) format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Martian Mono"; src: url(../fonts/martian-cyr.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: "Martian Mono"; src: url(../fonts/martian-lat.woff2) format("woff2"); font-weight: 100 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* — примитивы — */
  --ink-950: #050607;
  --ink-900: #0b0d10;
  --ink-850: #111418;
  --ink-800: #181c21;
  --ink-700: #242930;
  --chrome-50: #eceff3;
  --chrome-200: #c3c9d1;
  --chrome-300: #9aa3ae;
  --chrome-500: #808893; /* ≥ 4.5:1 на всех тёмных поверхностях */
  --lens-300: #7be3ff;
  --lens-400: #38d4fa;
  --lens-500: #14b4e0;
  --lens-700: #0e6fa8;
  --lens-ink: #04131b;
  --paper: #eef0f3;
  --paper-2: #e3e6ea;
  --paper-ink: #0b0d10;
  --paper-muted: #5b6470;
  --danger-400: #ff8a8a;

  /* — семантика — */
  --bg: var(--ink-950);
  --bg-raised: var(--ink-900);
  --surface: var(--ink-850);
  --surface-2: var(--ink-800);
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);
  --text: var(--chrome-50);
  --text-2: var(--chrome-300);
  --text-3: var(--chrome-500);
  --accent: var(--lens-400);
  --accent-hover: var(--lens-300);
  --accent-ink: var(--lens-ink);
  --accent-soft: rgba(56, 212, 250, 0.12);
  --accent-line: rgba(56, 212, 250, 0.45);
  --danger: var(--danger-400);
  --chrome-grad: linear-gradient(180deg, #ffffff 0%, #d3d8de 38%, #8a929c 72%, #4a5058 100%);

  /* — типографика — */
  --font-display: "Unbounded", system-ui, sans-serif;
  --font-body: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Martian Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --fs-display: clamp(52px, 13.6vw, 236px);
  --fs-h1: clamp(28px, min(4.1vw, 7.2vh), 58px);
  --fs-h2: clamp(30px, 5.2vw, 76px);
  --fs-h3: clamp(18px, 1.55vw, 23px);
  --fs-lead: clamp(17px, 1.35vw, 20px);
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-label: 11px;

  /* — отступы — */
  --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;
  --gutter: clamp(16px, 4vw, 48px);
  --container: 1440px;
  --section-gap: clamp(80px, 10vw, 150px);
  --grid-gap: clamp(12px, 1.6vw, 24px);

  /* — радиусы — */
  --r-xs: 6px; --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px; --r-pill: 999px;

  /* — глубина — */
  --edge: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 0 1px var(--line);
  --edge-strong: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 0 1px var(--line-strong);
  --lift: 0 40px 80px -40px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 0 1px var(--line-strong);
  --glow-accent: 0 0 0 1px rgba(56, 212, 250, 0.4), 0 10px 36px -10px rgba(56, 212, 250, 0.6);
  --focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);

  /* — движение — */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --d-fast: 160ms;
  --d-base: 280ms;
  --d-slow: 900ms;

  /* — слои — */
  --z-raised: 10; --z-sticky: 40; --z-header: 50; --z-overlay: 90; --z-modal: 100; --z-cursor: 200; --z-preloader: 1000;

  /* — компоненты — */
  --btn-h: 56px;
  --btn-dot: 44px;
  --field-h: 56px;
  --header-h: 64px;
}

@media (min-width: 1024px) {
  :root { --btn-h: 60px; --header-h: 84px; }
}