/* =============================================================
   Лексора — Design Tokens
   ============================================================= */

:root {
  /* ---------- Ink (text on light) ---------- */
  --ink:          #0B0F1A;
  --ink-soft:     #4A5265;
  --ink-faint:    #8A91A3;
  --ink-ghost:    #C3C8D4;

  /* ---------- Paper (warm light surfaces) ---------- */
  --paper:        #FAF7F2;
  --paper-warm:   #F2EDE3;
  --paper-deep:   #E9E0D1;

  /* ---------- Navy (dark surfaces) ---------- */
  --navy:             #0D1B2A;
  --navy-deep:        #060B16;
  --navy-ink:         #F0E9DD;
  --navy-ink-soft:    #A8AEBC;
  --navy-ink-faint:   #6B7285;

  /* ---------- Brand accents ---------- */
  --amber:        #F5B82E;
  --amber-warm:   #E9A315;
  --amber-deep:   #B27A06;
  --amber-glow:   rgba(245, 184, 46, 0.28);
  --teal:         #1FB3A6;
  --teal-deep:    #0F7F77;
  --teal-ink:     #084E4A;

  /* ---------- Type families ---------- */
  --font-display: 'Unbounded', ui-sans-serif, system-ui, sans-serif;
  --font-body:    'Golos Text', ui-sans-serif, system-ui, sans-serif;

  /* ---------- Fluid type scale ---------- */
  --text-xs:    clamp(12px, 0.78vw + 10px, 13px);
  --text-sm:    clamp(13px, 0.85vw + 11px, 14px);
  --text-base:  clamp(15px, 1vw + 12px, 16px);
  --text-lg:    clamp(17px, 1.2vw + 13px, 19px);
  --text-xl:    clamp(20px, 1.5vw + 14px, 24px);
  --text-2xl:   clamp(24px, 2vw + 16px, 32px);
  --text-3xl:   clamp(30px, 3vw + 16px, 48px);
  --text-4xl:   clamp(40px, 4.2vw + 16px, 72px);
  --text-5xl:   clamp(52px, 5.6vw + 20px, 96px);
  --text-hero:  clamp(44px, 7.2vw, 128px);
  --text-mega:  clamp(64px, 11vw, 200px);

  --lead-tight:   1.02;
  --lead-snug:    1.18;
  --lead-normal:  1.5;
  --lead-relaxed: 1.7;

  --track-tight:     -0.035em;
  --track-snug:      -0.02em;
  --track-normal:    0;
  --track-wide:      0.04em;
  --track-uppercase: 0.12em;

  /* ---------- Spacing scale ---------- */
  --space-2xs:  clamp(4px, 0.4vw + 2px, 8px);
  --space-xs:   clamp(8px, 0.8vw + 4px, 14px);
  --space-sm:   clamp(14px, 1.4vw + 8px, 22px);
  --space-md:   clamp(20px, 2.2vw + 10px, 32px);
  --space-lg:   clamp(28px, 3vw + 14px, 48px);
  --space-xl:   clamp(40px, 4.5vw + 16px, 72px);
  --space-2xl:  clamp(64px, 7vw + 20px, 120px);
  --space-3xl:  clamp(96px, 12vw + 20px, 180px);

  /* ---------- Layout ---------- */
  --container:      1200px;
  --container-wide: 1440px;
  --gutter:         clamp(20px, 4vw, 48px);
  --section-pad-y:  var(--space-3xl);

  /* ---------- Motion ---------- */
  --ease-out:       cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out:    cubic-bezier(0.77, 0, 0.175, 1);
  --ease-emphatic:  cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast:   160ms;
  --dur-base:   320ms;
  --dur-slow:   640ms;
  --dur-grand:  1200ms;

  /* ---------- Elevation ---------- */
  --shadow-sm: 0 1px 2px rgba(11,15,26,0.06), 0 2px 4px rgba(11,15,26,0.04);
  --shadow-md: 0 4px 12px rgba(11,15,26,0.08), 0 8px 24px rgba(11,15,26,0.06);
  --shadow-lg: 0 12px 32px rgba(11,15,26,0.10), 0 20px 48px rgba(11,15,26,0.08);
  --shadow-xl: 0 24px 64px rgba(11,15,26,0.14), 0 40px 96px rgba(11,15,26,0.08);

  /* ---------- Radii ---------- */
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   24px;
  --radius-xl:   40px;
  --radius-pill: 9999px;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast:  0ms;
    --dur-base:  0ms;
    --dur-slow:  0ms;
    --dur-grand: 0ms;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}