/* Media Ideya — design tokens (Figma 1920)
   Source: https://www.figma.com/design/vZBU6EVsQkEpdA2iTUvuTL
   Scale: --mi-s = min(1, 100vw / 1920px)
*/

:root {
  --mi-bp-sm: 992px;
  --mi-bp-md: 1280px;
  --mi-bp-lg: 1440px;
  --mi-bp-xl: 1920px;

  /* Uniform canvas scale — lock at Figma width and above
     MUST divide by 1920px (not 1920) so the result is unitless */
  --mi-s: min(1, calc(100vw / 1920px));

  /* Layout — Figma × --mi-s (header compacted for scroll) */
  --mi-page-width: calc(1920px * var(--mi-s));
  --mi-content-width: calc(1720px * var(--mi-s));
  --mi-gutter: calc(100px * var(--mi-s));
  --mi-header-height: calc(72px * var(--mi-s));

  /* Type — Figma scale; section H2 reduced vs hero/footer 96 */
  --mi-font: "Roboto Flex", "Segoe UI", sans-serif;
  --mi-fs-96: calc(96px * var(--mi-s));
  --mi-fs-section: calc(88px * var(--mi-s)); /* section titles ~86–90 */
  --mi-fs-64: calc(64px * var(--mi-s));
  --mi-fs-40: calc(40px * var(--mi-s));
  --mi-fs-32: calc(32px * var(--mi-s));
  --mi-fs-24: calc(24px * var(--mi-s));
  --mi-fs-20: calc(20px * var(--mi-s));
  --mi-fs-18: calc(18px * var(--mi-s));
  --mi-fs-16: calc(16px * var(--mi-s));

  /* Colors — Figma */
  --mi-color-bg: #ffffff;
  --mi-color-text: #0a0a0a;
  --mi-color-muted: #6b6b6b;
  --mi-color-brand: #264a65;
  --mi-color-accent: #264a65;
  --mi-color-blue: #4385bb;
  --mi-color-inverse: #ffffff;
  --mi-color-surface-dark: #112331;
  --mi-color-surface-soft: #edf5fd;
  --mi-color-hero-sky-from: #8db5d5;
  --mi-color-hero-sky-to: #6398c3;
  --mi-color-hero-fade-top: #4a7ca3;
  --mi-color-header-glass: rgba(17, 35, 49, 0.72);

  /* Radii */
  --mi-radius-btn: 100px;
  --mi-radius-pill: 100px;
  --mi-radius-card: calc(60px * var(--mi-s));
  --mi-radius-media: calc(40px * var(--mi-s));

  /* Spacing — Figma 1:30 section stack */
  --mi-space-section: calc(120px * var(--mi-s));
  --mi-space-section-sm: calc(100px * var(--mi-s));
  --mi-space-section-gap: calc(52px * var(--mi-s));
  --mi-space-gap-lg: calc(80px * var(--mi-s));
  --mi-space-gap-md: calc(60px * var(--mi-s));
  --mi-space-gap-sm: calc(24px * var(--mi-s));
  --mi-hero-scroll: 200vh;

  /* Motion */
  --mi-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --mi-duration: 0.35s;
}