/* ============================================================
   BLYSKAVKA — design tokens
   Ported from the Claude Design system (_ds/…/tokens/*.css).
   Base is BLACK; white + volt (#C8F14A) are the only accents.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@400;500;600;700&family=Exo+2:wght@300;400;500;600;700&display=swap');

:root {
  /* ---- Base ---- */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-signal-red: #ff0000;

  /* ---- Neutral — cool gray ---- */
  --color-neutral-50: #f6f6f7;
  --color-neutral-100: #ebebed;
  --color-neutral-200: #d7d7db;
  --color-neutral-300: #b4b4bb;
  --color-neutral-400: #8f8f99;
  --color-neutral-500: #6d6d78;
  --color-neutral-600: #575760;
  --color-neutral-700: #414148;
  --color-neutral-800: #1a1a1c;
  --color-neutral-900: #0f0f10;

  /* ---- Volt — electric-lime accent ---- */
  --color-volt-300: #dbf490;
  --color-volt-400: #c8f14a;
  --color-volt-500: #beef2a;

  /* ---- Semantic surfaces / text / borders ---- */
  --surface-base: #000000;
  --surface-raised: var(--color-neutral-900);
  --text-primary: #ffffff;
  --text-secondary: var(--color-neutral-300);
  --text-muted: var(--color-neutral-500);
  --text-accent: var(--color-volt-400);
  --border-subtle: var(--color-neutral-800);
  --border-default: var(--color-neutral-700);

  /* ---- Action ---- */
  --action-fill: var(--color-volt-400);
  --action-fill-hover: var(--color-volt-300);
  --action-fill-active: var(--color-volt-500);
  --action-text: #000000;
  --glow-focus: 0 0 0 3px rgb(200 241 74 / 0.45);

  /* ---- Type — Unbounded for the hero title + section headings (h1-h4);
     everything else (body copy, buttons, form fields, spec/ТТХ values) is
     Exo 2, via --font-body / --font-mono below. ---- */
  --font-heading: 'Unbounded', 'Exo 2', sans-serif;
  --font-body: 'Exo 2', sans-serif;
  --font-mono: 'Exo 2', sans-serif;

  /* ---- Spacing (4px base) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-16: 64px;

  /* ---- Layout ---- */
  --container-max: 1240px;
  --container-pad: 40px;
  --section-pad: 88px;

  /* ---- Shape / motion ---- */
  --border-w-hairline: 0.4px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-normal: 180ms;
}