:root {
  /* Spacing */
  --spacing-xxs: 0.25rem;
  --spacing-xs: 0.5rem;
  --spacing-sm: 0.75rem;
  --spacing-md: 1rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;
  --spacing-xxl: 4rem;
  --spacing-xxxl: 6rem;
  --spacing-xxxl-responsive: var(--spacing-xxxl) clamp(3rem, 2.5rem + 1vw, 6rem);

  /* Font Sizes */

  --step--2: clamp(0.5208rem, 0.5037rem + 0.0763vw, 0.5628rem);
  --step--1: clamp(0.625rem, 0.5738rem + 0.2276vw, 0.7502rem);
  --step-0: clamp(0.75rem, 0.6477rem + 0.4545vw, 1rem);
  --step-1: clamp(0.9rem, 0.7229rem + 0.7873vw, 1.333rem);
  --step-2: clamp(1.08rem, 0.7949rem + 1.2671vw, 1.7769rem);
  --step-3: clamp(1.296rem, 0.8572rem + 1.9502vw, 2.3686rem);
  --step-4: clamp(1.5552rem, 0.8998rem + 2.913vw, 3.1573rem);
  --step-5: clamp(1.8662rem, 0.9079rem + 4.2591vw, 4.2087rem);

  /* Typography */
  --font-heading: "sztos-variable", serif;
  --font-body: "Azo Sans", azo-sans-web, sans-serif;
  --font-mono: ellograph-cf, monospace;

  --flow: 1em;

  --tracking-tight: 0em;
  --tracking-normal: 0.01em;
  --tracking-wide: 0.2em;

  --line-height-tight: 1;
  --line-height-normal: 1.5;
  --line-height-loose: 1.8;

  /* Border Radius */
  --border-radius-sm: 0.3rem;
  --border-radius-md: 0.75rem;
  --border-radius-lg: 1.25rem;
  --border-radius-full: 30px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.15);

  /* Borders */
  --border-width-thin: 1px;
  --border-width-thick: 2px;

  --border-thin: var(--border-width-thin) solid var(--navy-ramp-200);
  --border-thick: var(--border-width-thick) solid var(--navy-ramp-200);

  /* Colors */
  --navy-ramp-50: #ffffff;
  --navy-ramp-100: #c8d1e6;
  --navy-ramp-200: #9aa7c7;
  --navy-ramp-300: #6b7aa1;
  --navy-ramp-400: #445379;
  --navy-ramp-500: #2c3a60;
  --navy-ramp-600: #202b4a;
  --navy-ramp-700: #161e38;
  --navy-ramp-800: #0c1120;
  --navy-ramp-900: #05070d;

  --accent-ramp-50: #edfaff;
  --accent-ramp-100: #d6f0ff;
  --accent-ramp-300: #7ed4ff;
  --accent-ramp-400: #3dc0ff;
  --accent-ramp-500: #00abfa;
  --accent-ramp-600: #0089de;
  --accent-ramp-700: #0072b8;

  --accent: var(--accent-ramp-500);

  --green-ramp-100: #f7feec;
  --green-ramp-200: #effdd9;
  --green-ramp-300: #e7fbc5;
  --green-ramp-400: #d9f9a5;

  --orange-ramp-100: #ffedc1;
  --orange-ramp-200: #ffe6ab;
  --orange-ramp-300: #ffdf96;
  --orange-ramp-400: #ffd880;

  --red-ramp-100: #ffd6da;
  --red-ramp-200: #ffb8bf;
  --red-ramp-300: #ff99a3;
  --red-ramp-400: #ff808c;

  /* Transitions */
  --transition-fast: 0.2s ease-in-out;
}