/* Design tokens extracted from katalist.org — colors, type, spacing, radii */

@import url("https://api.fontshare.com/v2/css?f[]=cabinet-grotesk@700,500,400&display=swap");

@font-face {
  font-family: "Geist";
  src: url("https://cdn.jsdelivr.net/npm/geist@1/dist/fonts/geist-sans/Geist-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("https://cdn.jsdelivr.net/npm/geist@1/dist/fonts/geist-sans/Geist-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("https://cdn.jsdelivr.net/npm/geist@1/dist/fonts/geist-sans/Geist-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

:root {
  /* Color palette */
  --color-deep-blue: #11374c;
  --color-deep-blue-faded: rgba(17, 55, 76, 0.6);
  --color-deep-blue-faded-more: rgba(17, 55, 76, 0.1);
  --color-medium-blue: #3a7697;
  --color-light-blue: #e1eff2;
  --color-peony: #ffa5fb;
  --color-sun: #fff493;
  --color-white: #ffffff;
  --color-white-faded: rgba(255, 255, 255, 0.1);
  --color-disabled: #a0afb7;
  --color-transparent: rgba(255, 255, 255, 0);

  /* Semantic roles */
  --color-bg: var(--color-white);
  --color-bg-muted: var(--color-light-blue);
  --color-text: var(--color-deep-blue);
  --color-text-inverted: var(--color-white);
  --color-accent-1: var(--color-peony);
  --color-accent-2: var(--color-sun);

  /* Typography */
  --ff-heading: "Cabinet Grotesk", "Cabinet Grotesk Fallback", sans-serif;
  --ff-body: "Geist", "Geist Fallback", sans-serif;

  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 2rem;
  --fs-3xl: 2.75rem;
  --fs-4xl: 3.75rem;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 5rem;
  --space-8: 8rem;

  /* Radii */
  --radius-sm: 0.25rem;
  --radius-md: 0.75rem;
  --radius-pill: 999px;

  /* Layout */
  --container-max: 1200px;
  --container-pad: var(--space-4);
}