:root {
  color-scheme: light;

  --app-sky: #00b4d8;
  --app-ocean: #0077b6;
  --app-deep: #03045e;
  --app-flame: #ff5400;
  --app-ember: #fb8500;
  --app-sun: #ffb703;
  --app-white: #ffffff;
  --app-grey-100: #f2f2f2;
  --app-grey-200: #ececec;
  --app-grey-300: #e0e0e0;
  --app-grey-600: #999999;
  --app-grey-700: #666666;
  --app-grey-800: #333333;
  --app-ocean-foam: #e3f0f8;

  --page-blue: #174f87;
  --page-blue-deep: #073766;
  --page-blue-dark: #032a50;
  --page-border: #33a8e0;
  --text: var(--app-white);
  --text-soft: rgba(255, 255, 255, 0.72);
  --text-muted: rgba(255, 255, 255, 0.58);

  --font-brand: Fredoka, "Trebuchet MS", ui-rounded, var(--font-body);
  --font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: Quicksand, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-control: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --radius-sm: 8px;
  --radius-pill: 999px;

  --shadow-button: 0 15px 36px rgba(3, 4, 94, 0.22);
  --shadow-blue-panel: 0 -18px 60px rgba(3, 20, 48, 0.24);

  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4.5rem;

  --container-pad: 1.25rem;
  --content-max: 1120px;
}