@font-face {
  font-family: "Space Grotesk";
  src:
    url("../../fonts/space-grotesk-regular.woff2") format("woff2"),
    url("../../fonts/space-grotesk-regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Space Grotesk";
  src:
    url("../../fonts/space-grotesk-semibold.woff2") format("woff2"),
    url("../../fonts/space-grotesk-semibold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Space Grotesk";
  src:
    url("../../fonts/space-grotesk-bold.woff2") format("woff2"),
    url("../../fonts/space-grotesk-bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-background: #050607;
  --color-surface: #111315;
  --color-foreground: #f4f4f0;
  --color-muted: #8c9092;
  --kodz-link-hover-color: rgb(244 244 240 / 48%);
  --color-grid: rgb(244 244 240 / 10%);
  --kodz-glass-surface: rgb(36 36 36 / 53%);
  --kodz-glass-surface-strong: var(--kodz-glass-surface);
  --kodz-glass-control: var(--kodz-glass-surface);
  --kodz-glass-blur: 25px;
  /* Grid strokes stay fully opaque inside their own layer. The shared layer
     opacity is applied after compositing, so line crossings never darken. */
  --kodz-grid-line-color: #fff;
  --kodz-grid-opacity: 0.06;
  --kodz-grid-size: calc(100vw / 40);
  --kodz-ui-radius: 0.3rem;
  --kodz-shell-padding-x: clamp(1.5rem, 1.6vw, 2rem);
  --kodz-shell-padding-y: clamp(1.25rem, 1.45vw, 1.75rem);
  --font-body: "Space Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: "Space Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-hero-title: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --container-large: 112.5rem;
  --container-medium: 75rem;
  --container-small: 50rem;
  /* Client-First-inspired global controllers. Components consume these
     variables instead of maintaining almost-identical local spacing values. */
  --padding-global: var(--kodz-shell-padding-x);
  --page-padding: var(--padding-global);
  --padding-section-small: clamp(3rem, 5vw, 5rem);
  --padding-section-medium: clamp(5rem, 8vw, 9rem);
  --padding-section-large: clamp(7rem, 10vw, 11rem);
  --section-space: var(--padding-section-medium);
  --layout-gap-small: clamp(0.75rem, 1vw, 1rem);
  --layout-gap-medium: clamp(1rem, 2vw, 2rem);
  --layout-gap-large: clamp(2rem, 4vw, 4rem);
  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --header-height: 3rem;
  --border-width: 1px;
  --z-header: 1000;
  --z-modal: 200;
}

@media (max-width: 991px) {
  :root {
    --kodz-shell-padding-x: 1.5rem;
    --padding-section-small: 3rem;
    --padding-section-medium: clamp(4rem, 9vw, 6rem);
    --padding-section-large: clamp(5rem, 11vw, 7rem);
  }
}

@media (max-width: 767px) {
  :root {
    --kodz-shell-padding-x: 1.25rem;
    --padding-section-small: 2.5rem;
    --padding-section-medium: 4.5rem;
    --padding-section-large: 6rem;
  }
}

@media (max-width: 479px) {
  :root {
    --kodz-shell-padding-x: 1rem;
    --padding-section-small: 2.25rem;
    --padding-section-medium: 4rem;
    --padding-section-large: 5rem;
    --header-height: 3.25rem;
  }
}