/* tokens.css — design tokens (source: Excel sheet Design!A4:B17 and Typography).
   The ONLY place where colours are defined. Change a colour here → it changes everywhere. */
:root {
  /* colours */
  --color-bg: #0E0F13;
  --color-surface: #171922;
  --color-surface-2: #222532;
  --color-border: #2E3242;
  --color-text: #F4F4F6;
  --color-text-muted: #A6AABB;
  --color-accent: #E53945;
  --color-accent-hover: #FF5361;       /* links, hover of icons — NOT a background under white text (3.2:1) */
  --color-accent-strong: #D02F3B;      /* background of accent buttons: white text 5.1:1 (AA) */
  --color-accent-press: #B8242F;       /* hover/active of accent buttons: white text 6.3:1 */
  --color-secondary: #6E86A6;
  --color-secondary-soft: #3A4A63;
  --color-white-ring: #FFFFFF;
  --color-success: #3DBE8B;
  --color-error: #FF6B6B;
  --color-text-strong: #FFFFFF;        /* pure white text: on accent buttons, hover states, strong/b, video captions */
  --color-video-bg: #000000;           /* letterbox behind video */
  --color-cta-tint: #2A1318;           /* dark red end of CTA-band gradients */
  --gradient-hero: linear-gradient(135deg,#0E0F13 0%,#1B1F2C 55%,#3A1219 100%);
  --gradient-accent: linear-gradient(135deg, #E53945 0%, #FF5361 100%);

  /* Ф8 01.10.2026 (Design!A56:E58): translucent copies of the colours above for surfaces over the moving background (motion.css).
     Same RGB as --color-surface / -surface-2 / -bg / -cta-tint / --gradient-hero; alpha keeps text contrast ≥ 4.5:1. */
  --surface-a: rgba(23, 25, 34, .88);
  --surface-2-a: rgba(34, 37, 50, .9);
  --bg-a: rgba(14, 15, 19, .82);
  --cta-tint-a: rgba(42, 19, 24, .88);
  --gradient-hero-a: linear-gradient(135deg, rgba(14, 15, 19, .84) 0%, rgba(27, 31, 44, .84) 55%, rgba(58, 18, 25, .84) 100%);
  --bg-glow-red: rgba(229, 57, 69, .55);      /* = --color-accent */
  --bg-glow-blue: rgba(110, 134, 166, .45);   /* = --color-secondary */
  --bg-motion-opacity: .18;                   /* landscape */
  --bg-motion-opacity-portrait: .16;
  --reveal-step: 150ms;                       /* documentation; the value is used in nav.js (STEP) */

  /* fonts (self-hosted woff2, @font-face in fonts.css — Requirements №78) */
  --font-heading: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* type scale */
  --fs-h1: clamp(2.2rem, 6vw, 4.5rem);
  --fs-h2: clamp(1.6rem, 3.5vw, 2.6rem);
  --fs-h3: clamp(1.2rem, 2vw, 1.5rem);
  --fs-body: clamp(1rem, 1.1vw, 1.125rem);
  --fs-small: 0.875rem;
  --lh-body: 1.6;
  --lh-heading: 1.15;

  /* spacing scale 4/8/12/16/24/32/48/64/96 */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --section-y: clamp(48px, 8vw, 96px);

  /* shapes and effects */
  --radius: 14px;
  --radius-sm: 10px;
  --radius-pill: 999px;
  --shadow: 0 10px 30px rgba(0, 0, 0, .45);
  --shadow-accent: 0 8px 24px rgba(229, 57, 69, .35);
  --ring: 0 0 0 3px var(--color-bg), 0 0 0 5px var(--color-white-ring);

  /* layout */
  --container: 1200px;
  --container-narrow: 820px;
  --gutter: clamp(16px, 4vw, 32px);
  --header-h: 72px;
  --tap: 44px;

  /* motion */
  --dur-fast: 200ms;
  --dur: 320ms;
  --dur-slow: 400ms;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

@media (min-width: 1440px) {
  :root {
    --container: 1320px;
    --gutter: 40px;
  }
}

@media (max-width: 767px) {
  :root { --header-h: 60px; }
}