@font-face {
  font-family: "Transcity";
  src: url("./assets/fonts/transcity-demo.otf") format("opentype");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

:root {
  color-scheme: light;

  --font-display: "Source Serif 4", Georgia, serif;
  --font-body: "Source Sans 3", ui-sans-serif, system-ui, sans-serif;
  --font-label: var(--font-body);
  --font-wordmark: "Transcity", var(--font-body);

  --color-paper: oklch(98.24% 0.0082 301.4);
  --color-paper-2: oklch(97.44% 0.0098 305.4);
  --color-paper-3: oklch(94.1% 0.0249 301.1);
  --color-ink: oklch(21.88% 0.0608 295.3);
  --color-ink-soft: oklch(40.06% 0.0532 301.8);
  --color-ink-faint: oklch(54.29% 0.0416 302.6);
  --color-rule: oklch(89.66% 0.0338 302.7);
  --color-rule-strong: oklch(76.39% 0.067 300.7);

  --color-brand: oklch(47.63% 0.2175 292);
  --color-brand-strong: oklch(40.47% 0.1913 291.2);
  --color-brand-mid: oklch(54.75% 0.2069 293.5);
  --color-brand-light: oklch(65.79% 0.1542 297.4);
  --color-brand-soft: oklch(86.9% 0.0614 297.6);
  --color-brand-whisper: oklch(94.1% 0.0249 301.1);
  --color-gold: oklch(62.92% 0.1185 68.6);
  --color-gold-soft: oklch(97.64% 0.0208 79.1);
  --color-green: oklch(53.02% 0.1112 160);
  --color-green-soft: oklch(96.92% 0.014 162.5);
  --color-focus: var(--color-brand-strong);

  --shadow-raised: 0 1rem 2.5rem -1.5rem oklch(21.88% 0.0608 295.3 / 0.38);
  --shadow-button: 0 0.28rem 0 var(--color-brand-strong), 0 0.75rem 1.5rem -1rem oklch(40.47% 0.1913 291.2 / 0.5);
  --shadow-contact: 0 0.12rem 0 var(--color-ink);

  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 9rem;

  --radius-sm: 0.75rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-xl: 2.125rem;
  --radius-pill: 999px;

  --text-xs: 0.72rem;
  --text-sm: 0.84rem;
  --text-base: 1rem;
  --text-md: 1.25rem;
  --text-lg: 1.56rem;
  --text-xl: 1.95rem;
  --text-2xl: 2.44rem;
  --text-3xl: 3.05rem;
  --text-display: clamp(3.05rem, 10vw + 1rem, 5.5rem);

  --shell: 76rem;
  --gutter: clamp(1rem, 4vw, 3.5rem);

  --dur-micro: 120ms;
  --dur-short: 200ms;
  --dur-long: 460ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --z-base: 1;
  --z-raised: 10;
  --z-sticky: 200;
}