/* Keyra — дизайн-токены. Минимализм: почти чёрный фон, один акцент (бирюза),
   крупный аккуратный гротеск, много воздуха. Все цвета берутся отсюда. */

:root {
  color-scheme: dark;

  /* фон и поверхности */
  --bg: #0e1011;
  --bg-2: #131617;
  --surface: #181b1d;
  --surface-2: #1f2326;
  --surface-3: #272c30;
  --line: rgba(255, 255, 255, 0.07);
  --line-strong: rgba(255, 255, 255, 0.14);

  /* текст */
  --text: #f3f5f4;
  --muted: #9aa3a0;
  --faint: #626b68;

  /* акцент Keyra */
  --accent: #2fe0c4;
  --accent-hover: #5beed6;
  --accent-ink: #032a23;          /* текст на акцентной кнопке */
  --accent-soft: rgba(47, 224, 196, 0.12);

  /* состояния */
  --good: #3ddc97;
  --warn: #f5b84b;
  --bad: #ff6b7a;

  /* типографика */
  --font: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-xs: 0.78rem;
  --fs-sm: 0.88rem;
  --fs-md: 1rem;
  --fs-lg: 1.12rem;
  --fs-xl: 1.5rem;
  --fs-2xl: clamp(1.9rem, 1.3rem + 2.2vw, 2.6rem);
  --fs-3xl: clamp(2.4rem, 1.4rem + 4vw, 4.4rem);

  /* форма */
  --r-xs: 10px;
  --r-sm: 14px;
  --r-md: 20px;
  --r-lg: 26px;
  --r-xl: 34px;
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.45);

  /* ритм */
  --container: 1240px;
  --gutter: clamp(16px, 3.5vw, 32px);
  --header-h: 76px;
  --section: clamp(56px, 8vw, 104px);

  /* движение */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 160ms;
  --t: 260ms;
  --t-slow: 600ms;
}

@media (max-width: 760px) {
  :root { --header-h: 64px; }
}