/* ==========================================================================
   RhythmMen — DESIGN TOKENS
   --------------------------------------------------------------------------
   Два слоя, правило не нарушать:
     Слой 1 — ПРИМИТИВЫ  (--navy-900, --violet-600, --space-5 …) — сырые значения.
     Слой 2 — СЕМАНТИКА  (--color-bg, --color-text, --color-accent …) — только
              к этому слою обращаются components.css и разметка.
   Палитра — по макету Figma (фрейм 95:1072): тёмно-синий → фиолетовый
   градиент, синий акцент #0E17E8, жёлтый бейдж, градиентные заголовки.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* --- Слой 1: примитивы ------------------------------------------------- */
  --navy-950: #05051A;
  --navy-900: #0A0A24;
  --navy-850: #10103A;
  --navy-800: #16164A;
  --navy-700: #1E1B5E;
  --violet-800: #2A1660;
  --violet-700: #3B1F86;
  --violet-600: #5B2BB8;
  --violet-500: #7C3AED;
  --magenta-500: #C13CBF;
  --blue-600: #0E17E8;
  --blue-500: #2F5BFF;
  --blue-400: #6B8CFF;
  --yellow-400: #FFC838;
  --yellow-300: #FFD766;
  --orange-400: #FF9B45;
  --pink-400: #FF6FB5;
  --white: #FFFFFF;
  --ink-100: #F1F1FA;
  --ink-200: #D7D8EC;
  --ink-300: #B4B6D6;
  --ink-400: #8A8DB4;
  --ink-500: #62658A;

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

  /* Шрифтовая шкала: fluid, от 360 до 1440 */
  --fs-display: clamp(2.6rem, 1.4rem + 5.2vw, 5.6rem);   /* 42 → 90px  ШОУ БАРАБАНЩИКІВ */
  --fs-h1:      clamp(2.1rem, 1.3rem + 3.2vw, 3.75rem);  /* 34 → 60px */
  --fs-h2:      clamp(1.7rem, 1.15rem + 2.3vw, 3rem);    /* 27 → 48px */
  --fs-h3:      clamp(1.25rem, 1.05rem + .8vw, 1.6rem);  /* 20 → 26px */
  --fs-lead:    clamp(1.05rem, .98rem + .35vw, 1.25rem);
  --fs-body:    1.0625rem;                                /* 17px */
  --fs-small:   .9rem;
  --fs-tiny:    .78rem;

  --lh-tight: 1.08;
  --lh-heading: 1.18;
  --lh-body: 1.6;

  /* 4px-шкала */
  --space-1: 4px;  --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 24px; --space-6: 32px;  --space-7: 48px;  --space-8: 64px;
  --space-9: 88px; --space-10: 120px;

  --container: 1200px;
  --gutter: clamp(16px, 4vw, 40px);

  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 999px;

  --shadow-card: 0 20px 60px rgba(5, 5, 26, .55);
  --shadow-glow: 0 0 60px rgba(124, 58, 237, .35);

  --dur-fast: .15s;
  --dur-base: .25s;
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* --- Слой 2: семантика -------------------------------------------------- */
  --color-bg: var(--navy-900);
  --color-bg-deep: var(--navy-950);
  --color-bg-elevated: var(--navy-850);
  --color-bg-gradient: linear-gradient(165deg, var(--navy-950) 0%, var(--navy-900) 38%, var(--violet-800) 78%, var(--violet-700) 100%);
  --color-bg-gradient-2: linear-gradient(180deg, var(--navy-900) 0%, var(--violet-800) 100%);
  --color-header: rgba(12, 12, 40, .78);
  --color-header-border: rgba(255, 255, 255, .08);

  --color-text: var(--ink-200);
  --color-text-strong: var(--white);
  --color-text-muted: var(--ink-400);
  --color-heading: var(--white);

  --color-accent: var(--blue-600);
  --color-accent-hover: var(--blue-500);
  --color-accent-soft: rgba(47, 91, 255, .18);
  --color-highlight: var(--yellow-400);
  --color-on-highlight: var(--navy-950);

  --color-card: rgba(255, 255, 255, .05);
  --color-card-hover: rgba(255, 255, 255, .08);
  --color-border: rgba(255, 255, 255, .12);
  --color-border-strong: rgba(255, 255, 255, .22);

  --color-focus: var(--yellow-300);
  --color-ok: #4ADE80;
  --color-danger: #FF7A7A;

  /* Градиенты текста — как в макете */
  --grad-text-hero: linear-gradient(180deg, #FFFFFF 0%, #C9CBE6 60%, #8A8DB4 100%);
  --grad-text-brand: linear-gradient(90deg, #FFFFFF 0%, #C6CBFF 40%, var(--blue-600) 100%);
  --grad-text-warm: linear-gradient(90deg, var(--orange-400) 0%, var(--pink-400) 50%, var(--violet-500) 100%);
  --grad-border-card: linear-gradient(135deg, var(--pink-400), var(--violet-500) 50%, var(--blue-500));
  --grad-badge-navy: linear-gradient(135deg, var(--navy-700), var(--violet-700));
}