/* ==========================================================================
   ascentech — дизайн-токены
   Цвета, типографика, отступы, радиусы, тени, анимации.
   Все значения проверены в docs/concept.md (раздел 5).
   ========================================================================== */

@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/onest-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/onest-latin.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;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/jbmono-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/jbmono-latin.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;
}
:root {
  /* ---- Цвет ---- */
  --ink: #0a0b10;
  --ink-soft: #565963;
  --paper: #ffffff;
  --surface: #f3f2ee;
  --surface-2: #e9e8e3;
  --line: rgba(10, 11, 16, 0.12);
  --line-strong: rgba(10, 11, 16, 0.24);

  /* Один сигнальный синий; голубой — только для акцентов на тёмном фоне */
  --accent: #3b5bff;
  --accent-hover: #2d49e0;
  --accent-soft: #dde3ff;
  --accent-on-dark: #8fa3ff;
  --sky: #78bcff;
  --prism: linear-gradient(90deg, #3b5bff, #7d95ff);

  --success: #1f8a4c;
  --error: #c8352f;

  --on-dark: #f5f4f1;
  --on-dark-soft: #a9acb4;
  --line-dark: rgba(255, 255, 255, 0.14);

  /* ---- Типографика ----
     Onest — основной гротеск (в том числе акцентные слова),
     JetBrains Mono — служебные подписи */
  --font: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --fs-h1: clamp(2.4rem, 7.6vw, 6.4rem);
  --fs-h2: clamp(2rem, 6vw, 4.8rem);
  --fs-h2-md: clamp(1.8rem, 4.4vw, 3.2rem);
  --fs-h3: clamp(1.25rem, 2.4vw, 1.75rem);
  --fs-lead: clamp(1.0625rem, 1.7vw, 1.3rem);
  --fs-body: 1rem;
  --fs-small: 0.8125rem;
  --fs-mono: 0.75rem;

  --lh-tight: 1.04;
  --lh-body: 1.6;
  --tracking-display: -0.04em;
  --tracking-mono: 0.06em;

  /* ---- Отступы (шаг 4px) ---- */
  --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;

  --section-y: clamp(56px, 10vw, 152px);
  --gutter: 20px;
  --container: 1440px;

  /* ---- Радиусы ---- */
  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 40px;
  --r-pill: 999px;

  /* ---- Тени ---- */
  --shadow-1: 0 2px 8px rgba(10, 11, 16, 0.08);
  --shadow-2: 0 8px 32px rgba(10, 11, 16, 0.12);
  --shadow-3: 0 24px 80px rgba(10, 11, 16, 0.18);

  /* ---- Анимации: единая система ----
     out-expo — появления и движения элементов (быстро стартует, мягко садится)
     in-out   — переключения состояний
     base     — hover и небольшие изменения  */
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);
  --t-fast: 200ms;
  --t-base: 400ms;
  --t-slow: 700ms;
  --t-reveal: 1100ms;
  --reveal-y: 36px;
  --stagger: 70ms;

  /* ---- Слои ---- */
  --z-progress: 60;
  --z-header: 50;
  --z-menu: 80;
  --z-dialog: 100;
  --z-cookie: 70;
  --z-cursor: 120;
}

@media (min-width: 768px) {
  :root { --gutter: 32px; }
}

@media (min-width: 1280px) {
  :root { --gutter: 48px; }
}