/* Шрифты — локальные файлы (те же, что у FlowUp Music), без запроса к Google Fonts */
@font-face { font-family: "Bebas Neue"; font-style: normal; font-weight: 400; font-display: swap; src: url(../assets/fonts/bebas-neue-latin.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../assets/fonts/inter-latin.woff2) format("woff2"); }

/* FlowUp Media — design tokens.
   Единственное место для цветов, шрифтов, размеров, отступов и breakpoints.
   Светлая тема по референсам (docs/references/reference-1, -2); цвета дизайн-системы
   (тёмно-синий, чёрный, кремовый, белый) — TODO: сверить точные значения с Figma. */
:root {
  /* Colors — design system swatches */
  /* Figma «Design _ Systema»: Blue FUM / Black FUM / Beige Fum / White FUM */
  --color-navy: #093863;
  --color-black: #000000;
  --color-cream: #fff9f2;
  --color-white: #ffffff;

  /* Dark theme (как FlowUp Music, по дизайн-системе) */
  --color-bg: #05080e;                 /* page background */
  --color-bg-elevated: #0b1220;        /* header / footer */
  --color-bg-cream: #0b1220;           /* (не используется в тёмной теме, оставлен для совместимости) */
  --color-surface: rgba(255, 255, 255, 0.04);   /* glass card */
  --color-surface-strong: rgba(255, 255, 255, 0.08);
  --color-border: rgba(255, 255, 255, 0.1);
  --color-border-strong: rgba(255, 255, 255, 0.22);
  --color-accent: #2f66e6;
  --color-accent-hover: #4a7cf0;
  --color-text: #ffffff;
  --color-text-muted: rgba(255, 255, 255, 0.68);
  --color-text-inverse: #ffffff;
  --color-header-bg: rgba(5, 8, 14, 0.85);
  --color-footer-bg: #05080e;
  --glow: radial-gradient(90% 52% at 74% 48%, rgba(13, 63, 110, 0.5) 0%, rgba(13, 63, 110, 0) 70%);

  /* Gradients — Gr Black / Gr Blue / Gr Beige */
  --gr-black: linear-gradient(180deg, rgba(90, 90, 90, 0.9) 0%, #0a0a0a 100%);
  --gr-blue: linear-gradient(180deg, #2e3a4e 0%, #0b2447 100%);
  --gr-beige: linear-gradient(180deg, #6e6a62 0%, #faf3e8 100%);
  --gr-hero: radial-gradient(70% 60% at 30% 40%, rgba(13, 63, 110, 0.45) 0%, rgba(5, 8, 14, 0) 70%);

  /* Typography */
  --font-heading: "Bebas Neue", Impact, sans-serif;      /* Figma: Main Text — Bebas Neue Bold */
  --font-body: "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif; /* Figma: accent / typeset text — Inter */
  --fs-hero: clamp(3.25rem, 9vw, 6rem);
  --fs-h2: clamp(2.5rem, 5.5vw, 3.75rem);
  --fs-h3: clamp(1.5rem, 2.5vw, 1.875rem);
  --fs-accent: 0.875rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --lh-heading: 0.92;
  --lh-body: 1.6;
  --tracking-accent: 0.12em;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --section-y: clamp(3.5rem, 8vw, 6rem);
  --container: 1440px;
  --gutter: clamp(1rem, 4vw, 2.5rem);

  /* Radii / shadows */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --shadow-card: 0 16px 40px rgba(0, 0, 0, 0.5);
  --shadow-soft: 0 4px 14px rgba(0, 0, 0, 0.3);
  --blur-glass: 12px;
  /* Glass — Figma «2 shadows glass» */
  --glass-blur: 4px;
  --glass-bg: rgba(255, 255, 255, 0.07);
  --glass-bg-hover: rgba(255, 255, 255, 0.14);
  --glass-accent: rgba(47, 102, 230, 0.82);
  --glass-blue: rgba(47, 102, 230, 0.28);   /* прозрачное синее стекло (плашки на фото) */
  --glass-border: rgba(255, 255, 255, 0.18);
  --glass-shadow: 2px 2px 2px rgba(0, 0, 0, 0.75), inset 2px 2px 2px rgba(255, 255, 255, 0.35);

  /* Breakpoints (для справки; в media-запросах те же числа) */
  --bp-mobile: 375px;
  --bp-tablet: 768px;
  --bp-desktop: 1024px;
  --bp-wide: 1280px;

  /* Motion */
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-inout: ease-in-out;          /* для зацикленных движений (парение коллажа) */
  --dur-slow: 600ms;                  /* переворот карточек, появление блоков */
  --reveal-shift: 28px;               /* на сколько блок смещён вниз до появления */
  --reveal-stagger: 0.08s;
  --dur-marquee: 70s;
  --dur-logos: 90s;          /* бегущая строка логотипов «Brands that trust us» */
  --zoom-flip-delay: 150ms;           /* сдвиг между увеличением и переворотом раскрытого кейса */                 /* один проход ряда плашек в Case studies */            /* задержка между соседними карточками в группе */
}