/* Source: web/app/globals.css, landing-page.tsx, button.tsx and Tailwind v4. */
@font-face {
  font-family: Geist;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/geist-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Geist Fallback";
  src: local(Arial);
  ascent-override: 95.94%;
  descent-override: 28.16%;
  line-gap-override: 0%;
  size-adjust: 104.76%;
}

:root {
  color-scheme: light;
  --skupeek-font: Geist, "Geist Fallback", sans-serif;
  --skupeek-text: oklch(12.9% 0.042 264.695);
  --skupeek-text-muted: oklch(44.6% 0.043 257.281);
  --skupeek-text-subtle: oklch(55.4% 0.046 257.417);
  --skupeek-text-control: oklch(37.2% 0.044 257.287);
  --skupeek-text-secondary: oklch(20.8% 0.042 265.755);
  --skupeek-background: #ffffff;
  --skupeek-surface: oklch(98.4% 0.003 247.858);
  --skupeek-surface-hover: oklch(96.8% 0.007 247.896);
  --skupeek-border: #e2e8f0;
  --skupeek-primary: #2563eb;
  --skupeek-primary-hover: oklch(48.8% 0.243 264.376);
  --skupeek-focus: oklch(54.6% 0.245 262.881);
  --skupeek-primary-surface: oklch(97% 0.014 254.604);
  --skupeek-primary-border: oklch(93.2% 0.032 255.585);
  --skupeek-primary-shadow: oklch(88.2% 0.059 254.128);
  --skupeek-header-background: rgb(255 255 255 / 90%);
  /* The rendered marketing CSS resolves the header border to this opaque token. */
  --skupeek-header-border: var(--skupeek-border);
  --skupeek-overlay: color-mix(in oklab, var(--skupeek-text) 30%, transparent);
  --skupeek-radius-sm: 4px;
  --skupeek-radius-md: 6px;
  --skupeek-radius-lg: 8px;
  --skupeek-container-width: 1280px;
  --skupeek-reading-width: 768px;
  --skupeek-wide-width: 1152px;
  --skupeek-gutter: 16px;
  --skupeek-space-1: 4px;
  --skupeek-space-2: 8px;
  --skupeek-space-3: 12px;
  --skupeek-space-4: 16px;
  --skupeek-space-5: 20px;
  --skupeek-space-6: 24px;
  --skupeek-space-7: 28px;
  --skupeek-space-8: 32px;
  --skupeek-space-10: 40px;
  --skupeek-space-12: 48px;
  --skupeek-space-14: 56px;
  --skupeek-space-16: 64px;
  --skupeek-space-20: 80px;
  --skupeek-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 10%), 0 1px 2px -1px rgb(0 0 0 / 10%);
  --skupeek-shadow-dialog: 0 25px 50px -12px rgb(0 0 0 / 25%);
  --skupeek-transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

@media (min-width: 640px) {
  :root { --skupeek-gutter: 24px; }
}

@media (min-width: 1024px) {
  :root { --skupeek-gutter: 32px; }
}