@theme {
  /* Colors */
  --color-current: currentColor;
  --color-transparent: transparent;

  /* Brand colors */
  --color-black: oklch(0% 0 0);
  --color-black-active: oklch(32.11% 0 0);
  --color-ultramarine: oklch(29.15% 0.061 267.08);
  --color-ultramarine-active: oklch(36.97% 0.08 267.62);
  --color-lavender: oklch(76.51% 0.095 272.69);
  --color-lavender-active: oklch(71.13% 0.112 272.43);
  --color-verdigris: oklch(76.87% 0.019 175.13);
  --color-verdigris-active: oklch(72.54% 0.022 173.68);
  --color-sand: oklch(84.83% 0.019 78.23);
  --color-sand-active: oklch(80.78% 0.019 78.22);
  --color-lightSand: oklch(95.68% 0.012 79.78);
  --color-lightSand-active: oklch(90.67% 0.022 80.68);
  --color-saffron: oklch(86.52% 0.177 90.38);
  --color-saffron-active: oklch(80.08% 0.164 90.52);
  --color-sienna: oklch(49.44% 0.103 32.76);
  --color-sienna-active: oklch(55.31% 0.103 32.96);
  --color-wave: oklch(54.31% 0.093 194.77);
  --color-wave-active: oklch(46.2% 0.079 194.77);
  --color-marygold: oklch(76.52% 0.175 62.57);
  --color-marygold-active: oklch(76.52% 0.175 62.57);
  --color-white: oklch(100% 0 0);
  --color-white-active: oklch(84.52% 0 0);

  /* Layout colors */
  --color-darkGrey: oklch(32.11% 0 0);
  --color-middleGrey: oklch(51.03% 0 0);
  --color-grey: oklch(68.3% 0 0);
  --color-lightGrey: oklch(84.52% 0 0);
  --color-pearl: oklch(97.61% 0 0);
  --color-green: oklch(50.65% 0.147 146.29);
  --color-green-active: oklch(40.92% 0.117 146.74);
  --color-red: oklch(54.78% 0.173 31.72);
  --color-red-active: oklch(46.31% 0.144 31.42);
  --color-orange: oklch(58.02% 0.168 44.35);
  --color-orange-active: oklch(48.38% 0.135 46.68);

  /* Font sizes */
  --text-b6: 0.625rem;
  --text-b6--line-height: 0.75rem;
  --text-b5: 0.75rem;
  --text-b5--line-height: 0.875rem;
  --text-b4: 0.875rem;
  --text-b4--line-height: 1.25rem;
  --text-b3: 1rem;
  --text-b3--line-height: 1.5rem;
  --text-b2: 1.25rem;
  --text-b2--line-height: 1.75rem;
  --text-b1: 1.5rem;
  --text-b1--line-height: 1.75rem;
  --text-b0: 1.75rem;
  --text-b0--line-height: 2rem;
  --text-h5: 1.5rem;
  --text-h5--line-height: 1.625rem;
  --text-h5--font-weight: '700';
  --text-h4: 1.75rem;
  --text-h4--line-height: 1.875rem;
  --text-h4--font-weight: '700';
  --text-h3: 2rem;
  --text-h3--line-height: 2.125rem;
  --text-h3--font-weight: '700';
  --text-h2: 2.5rem;
  --text-h2--line-height: 2.625rem;
  --text-h2--font-weight: '700';
  --text-h1: 3rem;
  --text-h1--line-height: 3.125rem;
  --text-h1--font-weight: '700';
  --text-h0: 4rem;
  --text-h0--line-height: 4.125rem;
  --text-h0--font-weight: '700';

  --font-weight--normal: '400';
  --font-weight--semibold: '600';
  --font-weight--bold: '700';

  /* Aspect ratio */

  --aspect-auto: auto;
  --aspect-horizontal: 19 / 12;
  --aspect-square: 1 / 1;
  --aspect-vertical: 19 / 25;
  --aspect-verticalVideo: 9 / 16; /* LEGACY */
  --aspect-vertical-video: 9 / 16;
  --aspect-video: 16 / 9;

  /* Border radius */
  --radius-0: 0rem;
  --radius-2: 0.125rem;
  --radius-4: 0.25rem;
  --radius-8: 0.5rem;
  --radius-16: 1rem;
  --radius-22: 1.375rem;
  --radius-32: 2rem;
  --radius-pill: calc(infinity * 1px);
  /*
    Transitioning from Infinity*1px to another value causes jumps in the layout
    This is not ideal, but currently necessary to achieve a pill that can transition to other border-radius values without jank.
   */
  --radius-pill-transitionable: 8rem;
  --radius-full: 100%;

  /* Breakpoints */
  --breakpoint-sm: 40rem; /* 640px */
  --breakpoint-md: 48rem; /* 768px */
  --breakpoint-lg: 64rem; /* 1024px */
  --breakpoint-xl: 76.25rem; /* 1220px */
  --breakpoint-2xl: 96rem; /* 1536px */
  --breakpoint-3xl: 128.75rem; /* 2060px NOT IN DCX */

  /* Container Queries */
  --container-*: initial;
  --container-xs: 20rem;
  --container-sm: 24rem;
  --container-md: 28rem;
  --container-lg: 32rem;
  --container-xl: 36rem;
  --container-2xl: 42rem;
  --container-3xl: 45.5rem;
  --container-4xl: 56rem;
  --container-5xl: 61.5rem;
  --container-6xl: 72rem;
  --container-7xl: 80rem;

  /* Box-shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); /* NOT IN DCX */
  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1) 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); /* NOT IN DCX */
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); /* NOT IN DCX */
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); /* NOT IN DCX */
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25); /* NOT IN DCX */
  --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05); /* NOT IN DCX */
  --shadow-none: none;

  /* Spacing */
  --spacing: calc(1rem / 16);

  --font-sans: var(--font-family-sans, Inter), 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif';
  --font-serif: var(--font-family-serif, Newsreader), 'Times New Roman', 'Times', 'serif';

  --transition-fn-boop: cubic-bezier(0.47, 1.64, 0.41, 0.8);
  --transition-duration-boop: 0.4s;

  --animate-none: none;
  --animate-backdrop-fade-in: backdrop-fade-in 220ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards; /* NOT IN DCX */
  --animate-backdrop-fade-out: backdrop-fade-out 180ms cubic-bezier(0.4, 0, 1, 1) forwards; /* NOT IN DCX */
  --animate-backdrop-sweep-in: backdrop-sweep-in 300ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards; /* NOT IN DCX */
  --animate-backdrop-sweep-out: backdrop-sweep-out 260ms cubic-bezier(0.4, 0, 1, 1) forwards; /* NOT IN DCX */
  --animate-boop: boop 230ms cubic-bezier(0.76, 0.24, 0.65, 0.85) normal both;
  --animate-bounce: bounce 1s infinite; /* NOT IN DCX */
  --animate-bounce-enter: bounce-enter 500ms linear;
  --animate-bounce-enter-strong: bounce-enter-strong 600ms linear;
  --animate-bounce-exit: bounce-exit 500ms linear;
  --animate-filling: filling 10s linear;
  --animate-loader-dash: loader-dash 1.5s ease-in-out infinite;
  --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; /* NOT IN DCX */
  --animate-pulsation: pulsation 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  --animate-pulse: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  --animate-rotates-in: rotates-in 0.4s ease-in-out;
  --animate-slide-down: slide-down 0.5s ease-out;
  --animate-slide-right-enter: slide-right-enter 0.4s ease;
  --animate-slide-right-exit: slide-right-exit 0.4s ease;
  --animate-slide-up: slide-up 0.5s ease-out;
  --animate-spin: spin 1s linear infinite;
  --animate-tick: tick 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s 1 normal forwards;
  --animate-toast-enter: toast-enter 0.4s ease; /* NOT IN DCX */
  --animate-toast-exit: toast-exit 0.4s ease; /* NOT IN DCX */
  --animate-tock: tock 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s 1 normal forwards;
  --animate-wave: wave 4s linear infinite;
  --animate-zoom-in: zoom-in 220ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards; /* NOT IN DCX */
  --animate-zoom-out: zoom-out 180ms cubic-bezier(0.4, 0, 1, 1) forwards; /* NOT IN DCX */
  --animate-wiggle: wiggle 0.75s ease-in-out;
}
