:root{
  /*Color Roles*/
  --surface: light-dark(var(--warm-gray-50), var(--warm-gray-900));
  --on-surface: light-dark(var(--warm-gray-950), var(--warm-gray-50));
  --on-surface-variant: light-dark(var(--warm-gray-850), var(--warm-gray-150));
  --surface-container-lowest: light-dark(var(--warm-gray-50), var(--warm-gray-900));
  --surface-container-low: light-dark(var(--warm-gray-75), var(--warm-gray-850));
  --surface-container: light-dark(var(--warm-gray-100), var(--warm-gray-825));
  --surface-container-high: light-dark(var(--warm-gray-125), var(--warm-gray-700));
  --surface-container-highest: light-dark(var(--warm-gray-150), var(--warm-gray-500));
  --primary: light-dark(var(--pink-500), var(--pink-50));
  --on-primary: light-dark(var(--pink-50), var(--pink-500));
  --primary-container: light-dark(var(--pink-200), var(--pink-700));
  --on-primary-container: light-dark(var(--pink-900), var(--pink-100));
  --primary-fixed: var(--pink-500);
  --on-primary-fixed: var(--pink-50);
  --secondary: var(--blue-500);
  --on-secondary: var(--blue-50);
  --secondary-container: var(--blue-200);
  --on-secondary-container: var(--blue-700);
  --tertiary: var(--yellow-500);
  --on-tertiary: var(--yellow-50);
  --tertiary-container: var(--yellow-200);
  --on-tertiary-container: var(--yellow-700);
  --shadow: oklch(from var(--warm-gray-950) l c h / .5);
}