/* GENERATED by npm run build:tokens. Do not edit directly. */

:where(.spool, [data-spool]) {
  --spool-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --spool-shadow-default: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --spool-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
  --spool-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --spool-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --spool-shadow-none: none;
  --spool-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --spool-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --background: 0 0% 100%;
  --foreground: 228.57 84% 4.9%;
  --card: 0 0% 100%;
  --card-foreground: 228.57 84% 4.9%;
  --popover: 0 0% 100%;
  --popover-foreground: 228.57 84% 4.9%;
  --primary: 228.57 84% 4.9%;
  --primary-foreground: 0 0% 100%;
  --secondary: 210 40% 96.08%;
  --secondary-foreground: 228.57 84% 4.9%;
  --muted: 210 40% 96.08%;
  --muted-foreground: 215.29 19.32% 34.51%;
  --accent: 210 40% 96.08%;
  --accent-foreground: 228.57 84% 4.9%;
  --destructive: 0 72.22% 50.59%;
  --destructive-foreground: 0 0% 100%;
  --border: 215.38 16.32% 46.86%;
  --input: 215.38 16.32% 46.86%;
  --ring: 228.57 84% 4.9%;
  --radius: 0.5rem;
  --chart-1: 24.58 94.98% 53.14%;
  --chart-2: 174.67 83.85% 31.57%;
  --chart-3: 224.28 76.33% 48.04%;
  --chart-4: 37.69 92.13% 50.2%;
  --chart-5: 349.72 89.16% 60.2%;
  color: hsl(var(--foreground));
  background-color: hsl(var(--background));
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:where(.spool, [data-spool]) * {
  border-color: hsl(var(--border));
}

:where(.spool, [data-spool])[data-mode="dark"] {
  --background: 228.57 84% 4.9%;
  --foreground: 210 40% 98.04%;
  --card: 222.22 47.37% 11.18%;
  --card-foreground: 210 40% 98.04%;
  --popover: 222.22 47.37% 11.18%;
  --popover-foreground: 210 40% 98.04%;
  --primary: 210 40% 98.04%;
  --primary-foreground: 228.57 84% 4.9%;
  --secondary: 217.24 32.58% 17.45%;
  --secondary-foreground: 210 40% 98.04%;
  --muted: 217.24 32.58% 17.45%;
  --muted-foreground: 215 20.22% 65.1%;
  --accent: 217.24 32.58% 17.45%;
  --accent-foreground: 210 40% 98.04%;
  --destructive: 0 62.82% 30.59%;
  --destructive-foreground: 210 40% 98.04%;
  --border: 215.38 16.32% 46.86%;
  --input: 215.38 16.32% 46.86%;
  --ring: 212.73 26.83% 83.92%;
  --chart-1: 27.02 95.98% 60.98%;
  --chart-2: 172.46 66.01% 50.39%;
  --chart-3: 213.12 93.9% 67.84%;
  --chart-4: 43.26 96.41% 56.27%;
  --chart-5: 351.3 94.52% 71.37%;
}

:where(.spool.surface-cc, [data-spool].surface-cc) {
  --primary: 263.39 69.96% 50.39%;
  --primary-foreground: 0 0% 100%;
  --ring: 263.39 69.96% 50.39%;
}

:where(.spool.surface-cc, [data-spool].surface-cc)[data-mode="dark"] {
  --primary: 252.5 94.74% 85.1%;
  --primary-foreground: 228.57 84% 4.9%;
  --ring: 252.5 94.74% 85.1%;
}

:where(.spool.surface-design, [data-spool].surface-design) {
  --primary: 294.69 72.41% 39.8%;
  --primary-foreground: 0 0% 100%;
  --ring: 294.69 72.41% 39.8%;
}

:where(.spool.surface-design, [data-spool].surface-design)[data-mode="dark"] {
  --primary: 291.11 93.1% 82.94%;
  --primary-foreground: 228.57 84% 4.9%;
  --ring: 291.11 93.1% 82.94%;
}

:where(.spool.surface-marketing, [data-spool].surface-marketing) {
  --primary: 224.28 76.33% 48.04%;
  --primary-foreground: 0 0% 100%;
  --ring: 224.28 76.33% 48.04%;
}

:where(.spool.surface-marketing, [data-spool].surface-marketing)[data-mode="dark"] {
  --primary: 199.37 95.49% 73.92%;
  --primary-foreground: 228.57 84% 4.9%;
  --ring: 199.37 95.49% 73.92%;
}

:where(.spool.surface-merchant, [data-spool].surface-merchant) {
  --primary: 162.93 93.55% 24.31%;
  --primary-foreground: 0 0% 100%;
  --ring: 162.93 93.55% 24.31%;
}

:where(.spool.surface-merchant, [data-spool].surface-merchant)[data-mode="dark"] {
  --primary: 156.2 71.6% 66.86%;
  --primary-foreground: 228.57 84% 4.9%;
  --ring: 156.2 71.6% 66.86%;
}

:where(.spool.surface-widget, [data-spool].surface-widget) {
  --primary: 192.92 82.28% 30.98%;
  --primary-foreground: 0 0% 100%;
  --ring: 192.92 82.28% 30.98%;
}

:where(.spool.surface-widget, [data-spool].surface-widget)[data-mode="dark"] {
  --primary: 186.99 92.41% 69.02%;
  --primary-foreground: 228.57 84% 4.9%;
  --ring: 186.99 92.41% 69.02%;
}