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

:root {
  --color-bg: #050505;
  --color-bg-alt: #f4f1eb;
  --color-surface: rgba(244, 241, 235, 0.8);
  --color-surface-strong: #101010;
  --color-text: #f2f2f2;
  --color-text-soft: rgba(242, 242, 242, 0.68);
  --color-inverse: #f2f2f2;
  --color-accent: #0887f8;
  --color-accent-soft: rgba(8, 135, 248, 0.12);
  --color-border: rgba(255, 255, 255, 0.1);
  --shadow-strong: 0 24px 60px rgba(8, 31, 60, 0.22);
  --shadow-soft: 0 18px 42px rgba(16, 16, 16, 0.12);
  --radius-xs: 12px;
  --radius-sm: 18px;
  --radius-md: 26px;
  --radius-lg: 38px;
  --radius-pill: 999px;
  --container: min(1180px, calc(100vw - 32px));
  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 20px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --font-display: "Bebas Neue", sans-serif;
  --font-body: "Manrope", sans-serif;
  --duration-fast: 180ms;
  --duration-base: 360ms;
  --duration-slow: 720ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}