Headlessui

:root {
  --color-dominant: #63a4d0;
  --color-surface: #044d80;
  --color-ink: #99c3e0;
  --color-accent: #687699;
  --color-detail: #bdbcc6;
}

/* CSS variables exposed by source */
:root {
  --color-blue-100: oklch(93.2% .032 255.585);
  --text-2xl: 1.5rem;
  --color-gray-800: #262626;
  --color-sky-500: oklch(68.5% .169 237.323);
  --text-lg: 1.125rem;
  --color-sky-300: oklch(82.8% .111 230.318);
  --color-pink-400: oklch(71.8% .202 349.761);
  --color-sky-400: oklch(74.6% .16 232.661);
  --text-2xl--line-height: calc(2 / 1.5);
  --spacing: .25rem;
  --font-mono: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  --text-xl--line-height: calc(1.75 / 1.25);
  --font-weight-semibold: 600;
  --color-gray-500: #737373;
  --text-sm: .875rem;
  --font-sans--font-feature-settings: "cv11";
  --color-blue-500: oklch(62.3% .214 259.815);
  --color-gray-950: #0a0a0a;
  --text-lg--line-height: calc(1.75 / 1.125);
  --color-white: #fff;
  --color-sky-600: oklch(58.8% .158 241.966);
  --color-gray-700: #404040;
  --color-gray-400: #a3a3a3;
  --color-blue-400: oklch(70.7% .165 254.624);
  --color-gray-600: #525252;
  --color-purple-400: oklch(71.4% .203 305.504);
  --color-blue-600: oklch(54.6% .245 262.881);
  --font-sans: Inter var,sans-serif;
  --text-4xl: 2.25rem;
  --font-weight-bold: 700;
  --color-gray-100: #f5f5f5;
  --text-sm--line-height: calc(1.25 / .875);
  --color-blue-200: oklch(88.2% .059 254.128);
  --color-gray-200: #e5e5e5;
  --color-black: #000;
  --text-xs--line-height: calc(1 / .75);
  --text-xs: .75rem;
  --font-weight-medium: 500;
  --radius-xl: .75rem;
  --radius-2xl: 1rem;
  --radius-md: .375rem;
  --color-sky-700: oklch(50% .134 242.749);
  --text-4xl--line-height: calc(2.5 / 2.25);
  --radius-lg: .5rem;
  --text-xl: 1.25rem;
  --text-base: 1rem;
  --container-md: 28rem;
  --tw-ring-offset-shadow: 0 0 #0000;
  --default-font-feature-settings: "cv11";
  --tw-inset-shadow-alpha: 100%;
  --tw-ring-shadow: 0 0 #0000;
  --tracking-tight: -.025em;
  --tw-drop-shadow-alpha: 100%;
  --default-transition-timing-function: cubic-bezier(.4,0,.2,1);
  --tw-outline-style: solid;
  --ease-in: cubic-bezier(.4,0,1,1);
  --tw-inset-ring-shadow: 0 0 #0000;
  --tw-translate-z: 0;
  --tw-scale-y: 1;
  --tw-translate-y: 0;
}