@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&display=swap");

:root {
  --color-bg: #10131b;
  --color-text-primary: #ffffff;
  --color-text-secondary: rgba(255, 255, 255, 0.6);
  --color-border: rgba(255, 255, 255, 0.14);
  --color-accent: #2b6bff;
  --color-link: #4e8fff;
  --color-link-hover: #78a8ff;
  --color-header-bg: rgba(16, 19, 27, 0.8);
  --color-button-hover: rgba(43, 107, 255, 0.08);
  --color-button-hover-border: rgba(43, 107, 255, 0.28);

  --font-ui: "Space Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: "Space Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --radius-sm: 10px;
  --radius-md: 14px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-12: 48px;

  --container-max: 1440px;
  --header-height: 60px;
  --page-gutter: var(--space-6);
  --page-gutter-mobile: var(--space-4);
  --section-gap-desktop: 100px;
  --section-gap-tablet: 72px;
  --section-gap-case: 140px;
  --section-title-size: clamp(32px, 4vw, 40px);
  --section-title-line-height: 48px;
  --display-title-size: clamp(32px, 4vw, 64px);
  --case-copy-width: 444px;
  --case-media-width: 800px;
  --case-task-media-width: 520px;
  --case-media-width-home: 917px;
  --sticky-offset-sm: 12px;
  --transition-fast: 180ms ease;
  --transition-medium: 220ms ease;
}