@speakeasy-api/moonshine 1.9.0-alpha.9 → 1.9.1

package/src/global.css

@@ -1,905 +0,0 @@
-@import 'tailwindcss';
-@import 'tw-animate-css';
-@plugin "@tailwindcss/typography";
-
-@custom-variant interact {
-  &:hover,
-  &:focus-visible {
-    @slot;
-  }
-}
-
-@source inline("{,sm:,md:,lg:,xl:,2xl:}{p-,px-,py-,pr-,pb-,pl-,pt-}{0,0.5,1,2,3,4,5,6,8,10,12,16}");
-@source inline("{,sm:,md:,lg:,xl:,2xl:}gap-{0,0.5,1,2,3,4,5,6,8,10,12,16}");
-@source inline("{,sm:,md:,lg:,xl:,2xl:}grid-cols-{1,2,3,4,5,6,7,8,9,10,11,12}");
-@source inline("{,sm:,md:,lg:,xl:,2xl:}flex-{row,col,nowrap,wrap,wrap-reverse,none,1,auto,initial,grow,shrink}");
-@source inline("{,sm:,md:,lg:,xl:,2xl:}justify-{start,center,end,between,evenly}");
-@source inline("{,sm:,md:,lg:,xl:,2xl:}items-{start,center,end,stretch,baseline}");
-@source inline("{,sm:,md:,lg:,xl:,2xl:}col-span-{1,2,3,4,5,6,7,8,9,10,11,12}");
-@source inline("{,sm:,md:,lg:,xl:,2xl:}size-{8,12,16,24,32}");
-
-@custom-variant dark (&:is(.dark *));
-
-/*
-  TODO: Remove all the heading !important after we remove Mui
-  TODO: rename to text-*
-*/
-@utility typography-heading-xl {
-  font-size: 2.063rem;
-  font-weight: 300;
-  line-height: 1.375;
-  letter-spacing: 0.0015em;
-  font-family: var(--font-diatype);
-}
-@utility typography-heading-lg {
-  font-size: 1.813rem;
-  font-weight: 300;
-  line-height: 1.5;
-  letter-spacing: 0.0015em;
-  font-family: var(--font-diatype);
-}
-@utility typography-heading-md {
-  font-size: 1.625rem;
-  font-weight: 300;
-  line-height: 1.6;
-  letter-spacing: 0.0015em;
-  font-family: var(--font-diatype);
-}
-@utility typography-heading-sm {
-  font-size: 1.438rem;
-  font-weight: 300;
-  line-height: 1.6;
-  letter-spacing: 0.0015em;
-  font-family: var(--font-diatype);
-}
-@utility typography-heading-xs {
-  font-size: 1.25rem;
-  font-weight: 300;
-  line-height: 1.6;
-  letter-spacing: 0.0015em;
-  font-family: var(--font-diatype);
-}
-@utility typography-heading-xxs {
-  font-size: 1.125rem !important;
-  font-weight: 300 !important;
-  line-height: 1.778 !important;
-  letter-spacing: 0.0015em !important;
-}
-@utility typography-body-lg {
-  font-size: 1.125rem;
-  font-weight: 400;
-  line-height: 1.75;
-  letter-spacing: 0.0025em;
-  font-family: var(--font-diatype);
-}
-@utility typography-body-md {
-  font-size: 1rem;
-  font-weight: 400;
-  line-height: 1.75;
-  letter-spacing: 0.0025em;
-  font-family: var(--font-diatype);
-}
-@utility typography-body-sm {
-  font-size: 0.875rem;
-  font-weight: 400;
-  line-height: 1.75;
-  letter-spacing: 0.0025em;
-  font-family: var(--font-diatype);
-}
-@utility typography-body-xs {
-  font-size: 0.75rem;
-  font-weight: 400;
-  line-height: 1.75;
-  letter-spacing: 0.0025em;
-  font-family: var(--font-diatype);
-}
-
-@utility container {
-  padding-inline: 1rem;
-  margin-inline: auto;
-
-  @variant sm {
-    padding-inline: 0.5rem;
-  }
-
-  @variant md {
-    padding-inline: 1rem;
-  }
-
-  @variant lg {
-    padding-inline: 1.5rem;
-  }
-
-  @variant xl {
-    padding-inline: 2rem;
-  }
-
-  @variant 2xl {
-    padding-inline: 2.5rem;
-  }
-}
-
-@utility bg-mask {
-  background-image: linear-gradient(
-    to bottom,
-    var(--background) 0%,
-    var(--color-transparent) 5%,
-    var(--color-transparent) 95%,
-    var(--background) 100%
-  );
-}
-
-/*
-  Shadcn classes are deprecated and will be removed once we add the proper moonshine tokens
-*/
-
-:root,
-:root.light {
-  --color-*: initial;
-
-  --font-diatype: 'Diatype', -apple-system, BlinkMacSystemFont, 'Segoe UI',
-    Roboto, Helvetica, Arial, sans-serif;
-  --font-diatype-mono: 'Diatype Mono', SFMono-Regular, Menlo, Monaco, Consolas,
-    'Liberation Mono', 'Courier New', monospace;
-  --font-tobias: 'Tobias', 'Cormorant', Georgia, Cambria, 'Times New Roman',
-    Times, serif;
-
-  --color-base-white: hsl(0 0% 100%);
-  --color-base-black: hsl(0 0% 0%);
-
-  /* Neutrals */
-  --color-neutral-100: hsl(0, 0%, 98%);
-  --color-neutral-200: hsl(0, 0%, 92%);
-  --color-neutral-300: hsl(0, 0%, 86%);
-  --color-neutral-400: hsl(0, 0%, 73%);
-  --color-neutral-500: hsl(0, 0%, 59%);
-  --color-neutral-600: hsl(0, 0%, 46%);
-  --color-neutral-700: hsl(0, 0%, 33%);
-  --color-neutral-800: hsl(0, 0%, 20%);
-  --color-neutral-900: hsl(0, 0%, 7%);
-
-  /* Brand red */
-  --color-brand-red-100: hsl(23, 96%, 62%);
-  --color-brand-red-200: hsl(19, 84%, 58%);
-  --color-brand-red-300: hsl(14, 74%, 54%);
-  --color-brand-red-400: hsl(9, 67%, 51%);
-  --color-brand-red-500: hsl(4, 67%, 47%);
-  --color-brand-red-600: hsl(1, 62%, 39%);
-  --color-brand-red-700: hsl(359, 58%, 31%);
-  --color-brand-red-800: hsl(352, 57%, 22%);
-  --color-brand-red-900: hsl(334, 54%, 13%);
-
-  --gradient-brand-red: radial-gradient(
-    138.34% 138.34% at 0% 4.4%,
-    var(--color-destructive-900) 0%,
-    var(--color-destructive-800) 12.5%,
-    var(--color-destructive-700) 25%,
-    var(--color-destructive-600) 37.5%,
-    var(--color-destructive-500) 50%,
-    var(--color-destructive-400) 62.5%,
-    var(--color-destructive-300) 75%,
-    var(--color-destructive-200) 87.5%,
-    var(--color-destructive-100) 100%
-  );
-
-  /* Brand green */
-  --color-brand-green-100: hsl(68, 52%, 72%);
-  --color-brand-green-200: hsl(75, 37%, 64%);
-  --color-brand-green-300: hsl(84, 28%, 56%);
-  --color-brand-green-400: hsl(95, 23%, 49%);
-  --color-brand-green-500: hsl(108, 24%, 41%);
-  --color-brand-green-600: hsl(116, 24%, 34%);
-  --color-brand-green-700: hsl(128, 30%, 25%);
-  --color-brand-green-800: hsl(140, 44%, 16%);
-  --color-brand-green-900: hsl(154, 100%, 7%);
-
-  --gradient-brand-green: radial-gradient(
-    137.26% 137.26% at 0% 0%,
-    var(--color-brand-green-900) 0%,
-    var(--color-brand-green-800) 12.5%,
-    var(--color-brand-green-700) 25%,
-    var(--color-brand-green-600) 37.5%,
-    var(--color-brand-green-500) 50%,
-    var(--color-brand-green-400) 62.5%,
-    var(--color-brand-green-300) 75%,
-    var(--color-brand-green-200) 87.5%,
-    var(--color-brand-green-100) 100%
-  );
-
-  /* Brand blue */
-  --color-brand-blue-100: hsl(216, 100%, 100%);
-  --color-brand-blue-200: hsl(215, 86%, 73%);
-  --color-brand-blue-300: hsl(215, 77%, 65%);
-  --color-brand-blue-400: hsl(215, 72%, 58%);
-  --color-brand-blue-500: hsl(214, 69%, 50%);
-  --color-brand-blue-600: hsl(215, 71%, 40%);
-  --color-brand-blue-700: hsl(215, 75%, 31%);
-  --color-brand-blue-800: hsl(217, 82%, 21%);
-  --color-brand-blue-900: hsl(220, 100%, 12%);
-
-  --gradient-brand-blue: radial-gradient(
-    141.42% 141.42% at 0% 0%,
-    var(--color-brand-blue-900) 0%,
-    var(--color-brand-blue-800) 12.5%,
-    var(--color-brand-blue-700) 25%,
-    var(--color-brand-blue-600) 37.5%,
-    var(--color-brand-blue-500) 50%,
-    var(--color-brand-blue-400) 62.5%,
-    var(--color-brand-blue-300) 75%,
-    var(--color-brand-blue-200) 87.5%,
-    var(--color-brand-blue-100) 100%
-  );
-
-  /* Tech colors */
-  --color-brand-typescript: hsl(0, 0%, 0%);
-  --color-brand-go: hsl(220, 100%, 12%);
-  --color-brand-java: hsl(214, 69%, 50%);
-  --color-brand-python: hsl(216, 100%, 80%);
-  --color-brand-c: hsl(154, 100%, 7%);
-  --color-brand-terraform: hsl(108, 24%, 41%);
-  --color-brand-unity: hsl(68, 52%, 72%);
-  --color-brand-php: hsl(334, 54%, 13%);
-  --color-brand-swift: hsl(4, 67%, 47%);
-  --color-brand-ruby: hsl(23, 96%, 62%);
-  --color-brand-postman: hsl(0, 0%, 83%);
-
-  --gradient-brand-primary-colors: var(--color-brand-php) 0%,
-    var(--color-brand-swift) 12.56%, var(--color-brand-ruby) 25.06%,
-    var(--color-brand-unity) 37.56%, var(--color-brand-terraform) 50.06%,
-    var(--color-brand-c) 62.06%, var(--color-brand-go) 74.06%,
-    var(--color-brand-java) 86.06%, var(--color-brand-python) 97.06%;
-
-  --gradient-brand-primary: linear-gradient(
-    90deg,
-    var(--gradient-brand-primary-colors)
-  );
-
-  --gradient-brand-primary-y: linear-gradient(
-    180deg,
-    var(--gradient-brand-primary-colors)
-  );
-
-  /* Feedback colors */
-
-  /* Destructive */
-  --color-destructive-100: hsl(0, 100%, 97%);
-  --color-destructive-200: hsl(3, 84%, 85%);
-  --color-destructive-300: hsl(3, 78%, 71%);
-  --color-destructive-400: hsl(2, 74%, 58%);
-  --color-destructive-500: hsl(4, 67%, 47%);
-  --color-destructive-600: hsl(2, 65%, 39%);
-  --color-destructive-700: hsl(1, 64%, 32%);
-  --color-destructive-800: hsl(1, 63%, 24%);
-  --color-destructive-900: hsl(0, 62%, 17%);
-
-  /* Warning */
-  --color-warning-100: hsl(29, 100%, 95%);
-  --color-warning-200: hsl(30, 100%, 85%);
-  --color-warning-300: hsl(28, 100%, 74%);
-  --color-warning-400: hsl(27, 100%, 66%);
-  --color-warning-500: hsl(23, 96%, 62%);
-  --color-warning-600: hsl(22, 70%, 53%);
-  --color-warning-700: hsl(21, 64%, 43%);
-  --color-warning-800: hsl(19, 66%, 33%);
-  --color-warning-900: hsl(18, 69%, 24%);
-
-  /* Success */
-  --color-success-100: hsl(102, 35%, 93%);
-  --color-success-200: hsl(99, 33%, 83%);
-  --color-success-300: hsl(99, 30%, 73%);
-  --color-success-400: hsl(101, 28%, 62%);
-  --color-success-500: hsl(108, 24%, 41%);
-  --color-success-600: hsl(107, 24%, 34%);
-  --color-success-700: hsl(105, 24%, 27%);
-  --color-success-800: hsl(104, 24%, 20%);
-  --color-success-900: hsl(105, 24%, 13%);
-
-  /* Information */
-  --color-info-100: hsl(212, 100%, 95%);
-  --color-info-200: hsl(214, 100%, 86%);
-  --color-info-300: hsl(214, 100%, 77%);
-  --color-info-400: hsl(214, 89%, 67%);
-  --color-info-500: hsl(214, 69%, 50%);
-  --color-info-600: hsl(215, 70%, 41%);
-  --color-info-700: hsl(215, 71%, 32%);
-  --color-info-800: hsl(217, 73%, 23%);
-  --color-info-900: hsl(218, 73%, 15%);
-
-  --color-link-default: hsl(201, 86%, 43%);
-  --color-link-visited-primary: hsl(201, 100%, 24%);
-  --color-link-visited-secondary: hsl(201, 5%, 65%);
-
-  /* Utility Tokens */
-  --border-warning: var(--color-warning-300);
-  --text-warning: var(--color-warning-700);
-  --bg-warning: var(--color-warning-100);
-
-  /* Shadcn colors these should only reference moonshine colors*/
-  --radius: 0.625rem;
-  --background-pure: var(--color-base-white);
-  --background: var(--color-neutral-100);
-  --foreground: var(--color-neutral-900);
-  --card: var(--color-base-white);
-  --card-foreground: var(--color-neutral-900);
-  --popover: var(--color-base-white);
-  --popover-foreground: var(--color-neutral-900);
-  --primary: var(--color-base-black);
-  --primary-foreground: var(--color-base-white);
-  --secondary: var(--color-neutral-100);
-  --secondary-foreground: var(--color-neutral-900);
-  --muted: var(--color-neutral-200);
-  --muted-foreground: var(--color-neutral-900);
-  --accent: var(--color-neutral-100);
-  --accent-foreground: var(--color-neutral-900);
-  --destructive: var(--color-destructive-500);
-  --border: var(--color-neutral-300);
-  --input: var(--color-neutral-400);
-  --ring: var(--color-brand-blue-600);
-  --chart-1: var(--color-brand-red-600);
-  --chart-2: var(--color-brand-green-600);
-  --chart-3: var(--color-brand-red-600);
-  --chart-4: var(--color-brand-blue-600);
-  --chart-5: var(--color-brand-green-600);
-  --sidebar: var(--color-neutral-100);
-  --sidebar-foreground: var(--color-neutral-900);
-  --sidebar-primary: var(--color-base-black);
-  --sidebar-primary-foreground: var(--color-neutral-300);
-  --sidebar-accent: var(--color-neutral-300);
-  --sidebar-accent-foreground: var(--color-neutral-900);
-  --sidebar-border: var(--color-neutral-300);
-  --sidebar-ring: var(--color-brand-blue-600);
-
-  /* Up to here */
-
-  --success: var(--color-success-100);
-  --success-foreground: var(--color-success-700);
-
-  --destructive: var(--color-destructive-100);
-  --destructive-foreground: var(--color-destructive-700);
-
-  --warning: var(--color-warning-100);
-  --warning-foreground: var(--color-warning-700);
-
-  --info: var(--color-info-100);
-  --info-foreground: var(--color-info-700);
-
-  --feature: var(--color-info-100);
-  --feature-foreground: var(--color-info-700);
-
-  --shadow: hsl(0 0% 50%);
-
-  /* Custom scrollbar */
-  --sb-size: 0.5rem;
-  --sb-track-color: var(--color-background);
-  --sb-thumb-color: var(--color-background);
-  --sb-track-border: var(--color-neutral-300);
-
-  /* Score colors - mapped to our new tokens */
-  --score-low: var(--color-destructive-500);
-  --score-mid: var(--color-warning-500);
-  --score-high: var(--color-success-500);
-  --score-track: var(--color-neutral-700);
-
-  /* Custom easing functions */
-  --ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
-  --ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
-  --ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
-  --ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-  --ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
-  --ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);
-
-  --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
-  --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
-  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
-  --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
-  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
-  --ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
-
-  --ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
-  --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
-  --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
-  --ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
-  --ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
-  --ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);
-
-  /* Moonshine tokens */
-  /* --color-accessibility: var(--color-brand-blue-500);
-  --color-transparent: oklch(0 0 0 / 0);
-
-  --color-neutral-50: var(--color-neutral-100);
-  --color-neutral-100: var(--color-neutral-100);
-  --color-neutral-200: var(--color-neutral-200);
-  --color-neutral-300: var(--color-neutral-300);
-  --color-neutral-400: var(--color-neutral-400);
-  --color-neutral-500: var(--color-neutral-500);
-  --color-neutral-600: var(--color-neutral-600);
-  --color-neutral-800: var(--color-neutral-800);
-  --color-neutral-900: var(--color-neutral-900);
-  --color-neutral-950: var(--color-neutral-900);
-
-  --color-brand-yellow-50: var(--color-warning-100);
-  --color-brand-yellow-100: var(--color-warning-100);
-  --color-brand-yellow-200: var(--color-warning-200);
-  --color-brand-yellow-300: var(--color-warning-300);
-  --color-brand-yellow-400: var(--color-warning-400);
-  --color-brand-yellow-500: var(--color-warning-500);
-  --color-brand-yellow-600: var(--color-warning-600);
-  --color-brand-yellow-700: var(--color-warning-700);
-  --color-brand-yellow-800: var(--color-warning-800);
-  --color-brand-yellow-900: var(--color-warning-900);
-  --color-brand-yellow-950: var(--color-warning-900);
-
-  --color-base-white: var(--color-base-white);
-  --color-base-black: var(--color-base-black);
-
-  --color-danger-fill: var(--color-destructive-500);
-  --color-danger-text: var(--color-destructive-600);
-  --color-feature-fill: var(--color-info-500);
-  --color-feature-text: var(--color-info-600);
-  --color-information-fill: var(--color-info-500);
-  --color-information-text: var(--color-info-600);
-  --color-success-fill: var(--color-success-500);
-  --color-success-text: var(--color-success-600);
-  --color-warning-fill: var(--color-warning-500);
-  --color-warning-text: var(--color-warning-600);
-
-  --color-link-default: var(--color-link-default);
-  --color-link-visited-primary: var(--color-link-visited-primary);
-  --color-link-visited-secondary: var(--color-link-visited-secondary); */
-}
-
-:root.dark {
-  /* Link colors - adjusted for dark mode
-  --color-link-default: oklch(0.75 0.15 240);
-  --color-link-visited-primary: oklch(0.65 0.15 240);
-  --color-link-visited-secondary: oklch(0.75 0.02 240);
-
-  /* Dimensions */
-  /* --header-height: 65px; */
-
-  /* Legacy tokens - will be removed in future versions */
-  /* --color-accessibility: oklch(0.75 0.15 240); */
-  /* --color-transparent: oklch(1 0 0 / 0); */
-
-  /* Shadcn theme */
-
-  --background-pure: var(--color-base-black);
-  --background: var(--color-base-black);
-  --foreground: var(--color-neutral-300);
-
-  --card: var(--color-neutral-900);
-  --card-foreground: var(--color-neutral-300);
-
-  --popover: var(--color-base-black);
-  --popover-foreground: var(--color-neutral-100);
-
-  --primary: var(--color-base-black);
-  --primary-foreground: var(--color-neutral-300);
-
-  --secondary: var(--color-neutral-900);
-  --secondary-foreground: var(--color-neutral-300);
-
-  --muted: var(--color-neutral-800);
-  --muted-foreground: var(--color-base-white);
-
-  --accent: var(--color-neutral-800);
-  --accent-foreground: var(--color-base-white);
-  --destructive: var(--color-destructive-500);
-  --border: var(--color-neutral-700);
-  --input: var(--color-neutral-700);
-  --ring: var(--color-brand-blue-600);
-  --chart-1: var(--color-brand-red-600);
-  --chart-2: var(--color-brand-green-600);
-  --chart-3: var(--color-brand-red-600);
-  --chart-4: var(--color-brand-blue-600);
-  --chart-5: var(--color-brand-green-600);
-
-  --sidebar: var(--color-neutral-900);
-  --sidebar-foreground: var(--color-base-white);
-
-  --sidebar-primary: var(--color-brand-red-600);
-  --sidebar-primary-foreground: var(--color-neutral-300);
-
-  --sidebar-accent: var(--color-neutral-700);
-  --sidebar-accent-foreground: var(--color-base-white);
-
-  --sidebar-border: var(--color-neutral-700);
-  --sidebar-ring: var(--color-brand-blue-600);
-
-  /* Up to here */
-
-  --success: var(--color-success-500);
-  --success-foreground: var(--color-success-100);
-  --destructive: var(--color-destructive-500);
-  --destructive-foreground: var(--color-destructive-100);
-  --warning: var(--color-warning-500);
-  --warning-foreground: var(--color-warning-100);
-  --info: var(--color-info-500);
-  --info-foreground: var(--color-info-100);
-  --feature: var(--color-info-500);
-  --feature-foreground: var(--color-info-100);
-
-  /* Score colors */
-  --score-low: hsl(350 89% 60%);
-  --score-mid: hsl(38 92% 50%);
-  --score-high: hsl(160 84% 39%);
-  --score-track: hsl(48 4% 28%);
-
-  --header-border: 0 0% 14.9%;
-
-  /* Custom scrollbar */
-  --sb-track-color: var(--color-neutral-800);
-  --sb-thumb-color: var(--color-neutral-900);
-  --sb-track-border: var(--color-neutral-800);
-
-  /* Utility Tokens */
-  --bg-warning: var(--color-warning-900);
-  --border-warning: var(--color-warning-700);
-  --text-warning: var(--color-warning-300);
-}
-
-@theme {
-  --font-sans: var(--font-diatype);
-  --font-mono: var(--font-diatype-mono);
-  --font-display: var(--font-tobias);
-  --font-ascii: var(--font-speakeasy), var(--font-diatype-mono), monospace;
-}
-
-@theme inline {
-  /* Base colors */
-  --color-base-white: var(--color-base-white);
-  --color-base-black: var(--color-base-black);
-
-  /* Neutral colors */
-  --color-neutral-100: var(--color-neutral-100);
-  --color-neutral-200: var(--color-neutral-200);
-  --color-neutral-300: var(--color-neutral-300);
-  --color-neutral-400: var(--color-neutral-400);
-  --color-neutral-500: var(--color-neutral-500);
-  --color-neutral-600: var(--color-neutral-600);
-  --color-neutral-700: var(--color-neutral-700);
-  --color-neutral-800: var(--color-neutral-800);
-  --color-neutral-900: var(--color-neutral-900);
-
-  /* Brand colors */
-  --color-brand-red-100: var(--color-brand-red-100);
-  --color-brand-red-200: var(--color-brand-red-200);
-  --color-brand-red-300: var(--color-brand-red-300);
-  --color-brand-red-400: var(--color-brand-red-400);
-  --color-brand-red-500: var(--color-brand-red-500);
-  --color-brand-red-600: var(--color-brand-red-600);
-  --color-brand-red-700: var(--color-brand-red-700);
-  --color-brand-red-800: var(--color-brand-red-800);
-  --color-brand-red-900: var(--color-brand-red-900);
-
-  /* Feedback colors */
-  --color-destructive-100: var(--color-destructive-100);
-  --color-destructive-200: var(--color-destructive-200);
-  --color-destructive-300: var(--color-destructive-300);
-  --color-destructive-400: var(--color-destructive-400);
-  --color-destructive-500: var(--color-destructive-500);
-  --color-destructive-600: var(--color-destructive-600);
-  --color-destructive-700: var(--color-destructive-700);
-  --color-destructive-800: var(--color-destructive-800);
-  --color-destructive-900: var(--color-destructive-900);
-
-  --color-warning-100: var(--color-warning-100);
-  --color-warning-200: var(--color-warning-200);
-  --color-warning-300: var(--color-warning-300);
-  --color-warning-400: var(--color-warning-400);
-  --color-warning-500: var(--color-warning-500);
-  --color-warning-600: var(--color-warning-600);
-  --color-warning-700: var(--color-warning-700);
-  --color-warning-800: var(--color-warning-800);
-  --color-warning-900: var(--color-warning-900);
-
-  --color-success-100: var(--color-success-100);
-  --color-success-200: var(--color-success-200);
-  --color-success-300: var(--color-success-300);
-  --color-success-400: var(--color-success-400);
-  --color-success-500: var(--color-success-500);
-  --color-success-600: var(--color-success-600);
-  --color-success-700: var(--color-success-700);
-  --color-success-800: var(--color-success-800);
-  --color-success-900: var(--color-success-900);
-
-  --color-info-100: var(--color-info-100);
-  --color-info-200: var(--color-info-200);
-  --color-info-300: var(--color-info-300);
-  --color-info-400: var(--color-info-400);
-  --color-info-500: var(--color-info-500);
-  --color-info-600: var(--color-info-600);
-  --color-info-700: var(--color-info-700);
-  --color-info-800: var(--color-info-800);
-  --color-info-900: var(--color-info-900);
-
-  /* Link colors */
-  --color-link: var(--color-link-default);
-  --color-link-secondary: var(--color-neutral-200);
-  --color-link-visited-primary: var(--color-link-visited-primary);
-  --color-link-visited-secondary: var(--color-link-visited-secondary);
-
-  /* Shadcn theme */
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-
-  --color-background: var(--background);
-  --color-background-pure: var(--background-pure);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-
-  --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
-
-  --color-sidebar: var(--sidebar);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
-
-  /* Alert Colors */
-  --color-success: var(--success);
-  --color-success-foreground: var(--success-foreground);
-  --color-info: var(--info);
-  --color-info-foreground: var(--info-foreground);
-  --color-warning: var(--warning);
-  --color-warning-foreground: var(--warning-foreground);
-  --color-destructive: var(--destructive);
-  --color-destructive-foreground: var(--destructive-foreground);
-  --color-feature: var(--feature);
-  --color-feature-foreground: var(--feature-foreground);
-
-  /* Text Colors */
-  --color-heading-xl: var(--color-neutral-100);
-  --color-heading-lg: var(--color-neutral-100);
-  --color-heading-md: var(--color-neutral-100);
-  --color-heading-sm: var(--color-neutral-100);
-  --color-heading-xs: var(--color-neutral-100);
-  --color-body: var(--color-neutral-200);
-  --color-body-muted: var(--color-neutral-400);
-
-  /* Animation */
-  --keyframes-wiggle: {
-    0%,
-    100% {
-      transform: rotate(-1.5deg);
-    }
-    50% {
-      transform: rotate(1.5deg);
-    }
-  };
-  --animate-wiggle: wiggle 1s ease-in-out infinite;
-
-  /* Transition Timing Functions */
-  --ease-in-out-quad: var(--ease-in-out-quad);
-  --ease-in-out-cubic: var(--ease-in-out-cubic);
-  --ease-in-out-quart: var(--ease-in-out-quart);
-  --ease-in-out-quint: var(--ease-in-out-quint);
-  --ease-in-out-expo: var(--ease-in-out-expo);
-  --ease-in-out-circ: var(--ease-in-out-circ);
-
-  --ease-in-quad: var(--ease-in-quad);
-  --ease-in-cubic: var(--ease-in-cubic);
-  --ease-in-quart: var(--ease-in-quart);
-  --ease-in-quint: var(--ease-in-quint);
-  --ease-in-expo: var(--ease-in-expo);
-  --ease-in-circ: var(--ease-in-circ);
-
-  --ease-out-quad: var(--ease-out-quad);
-  --ease-out-cubic: var(--ease-out-cubic);
-  --ease-out-quart: var(--ease-out-quart);
-  --ease-out-quint: var(--ease-out-quint);
-  --ease-out-expo: var(--ease-out-expo);
-  --ease-out-circ: var(--ease-out-circ);
-}
-
-/*
-  The default border color has changed to `currentColor` in Tailwind CSS v4,
-  so we've added these compatibility styles to make sure everything still
-  looks the same as it did with Tailwind CSS v3.
-
-  If we ever want to remove these styles, we need to add an explicit border
-  color utility to any element that depends on these defaults.
-*/
-@layer base {
-  *,
-  ::after,
-  ::before,
-  ::backdrop,
-  ::file-selector-button {
-    border-color: var(--color-gray-200, currentColor);
-  }
-
-  button:not(:disabled),
-  [role='button']:not(:disabled) {
-    cursor: pointer;
-  }
-
-  * {
-    /* @apply border; */
-  }
-
-  body {
-    @apply bg-background text-foreground;
-  }
-}
-
-@layer utilities {
-  .devicon-devicon-plain {
-    max-width: 2em;
-  }
-
-  /* if you want to change the original color */
-  .devicon-devicon-plain path {
-    fill: var(--primary);
-  }
-
-  @keyframes slide-fade-in {
-    from {
-      opacity: 0;
-      transform: translateX(100%);
-    }
-    to {
-      opacity: 1;
-      transform: translateX(0);
-    }
-  }
-
-  @keyframes slide-fade-out {
-    from {
-      opacity: 1;
-      transform: translateX(0);
-    }
-    to {
-      opacity: 0;
-      transform: translateX(-100%);
-    }
-  }
-
-  @keyframes spin {
-    from {
-      transform: rotate(0deg);
-    }
-    to {
-      transform: rotate(360deg);
-    }
-  }
-}
-
-/* Display Typography */
-
-/* This token name is not final */
-@utility text-display-2xl {
-  font-size: 11.375rem; /* 182px */
-  font-weight: 100;
-  line-height: 1;
-  letter-spacing: -0.04em;
-  font-family: var(--font-tobias);
-}
-
-@utility text-display-xl {
-  font-size: 5.625rem;
-  font-weight: 100;
-  line-height: 1.1;
-  letter-spacing: -0.04em;
-  font-family: var(--font-tobias);
-}
-
-@utility text-display-lg {
-  font-size: 4.188rem;
-  font-weight: 100;
-  line-height: 1.2;
-  letter-spacing: -0.04em;
-  font-family: var(--font-tobias);
-}
-
-@utility text-display-md {
-  font-size: 3.188rem;
-  font-weight: 100;
-  line-height: 1.3;
-  letter-spacing: -0.04em;
-  font-family: var(--font-tobias);
-}
-
-@utility text-display-sm {
-  font-size: 2.375rem;
-  font-weight: 100;
-  line-height: 1.375;
-  letter-spacing: -0.04em;
-  font-family: var(--font-tobias);
-}
-
-@utility text-display-xs {
-  font-size: 1.75rem;
-  font-weight: 100;
-  line-height: 1.4;
-  letter-spacing: -0.04em;
-  font-family: var(--font-tobias);
-}
-
-/* Heading */
-@utility text-heading-xl {
-  font-size: 2.063rem;
-  font-weight: 300;
-  line-height: 1.375;
-  letter-spacing: 0.0015em;
-  font-family: var(--font-diatype);
-}
-@utility text-heading-lg {
-  font-size: 1.813rem;
-  font-weight: 300;
-  line-height: 1.5;
-  letter-spacing: 0.0015em;
-  font-family: var(--font-diatype);
-}
-@utility text-heading-md {
-  font-size: 1.625rem;
-  font-weight: 300;
-  line-height: 1.6;
-  letter-spacing: 0.0015em;
-  font-family: var(--font-diatype);
-}
-@utility text-heading-sm {
-  font-size: 1.438rem;
-  font-weight: 300;
-  line-height: 1.6;
-  letter-spacing: 0.0015em;
-  font-family: var(--font-diatype);
-}
-@utility text-heading-xs {
-  font-size: 1.25rem;
-  font-weight: 300;
-  line-height: 1.6;
-  letter-spacing: 0.0015em;
-  font-family: var(--font-diatype);
-}
-
-@utility bg-gradient-primary {
-  background: var(--gradient-brand-primary);
-}
-
-@utility bg-surface-primary {
-  background-color: var(--color-base-white);
-  @apply dark:bg-black;
-}
-
-@utility bg-surface-secondary {
-  background-color: var(--color-neutral-100);
-}
-
-@utility bg-warning {
-  background-color: var(--bg-warning);
-}
-
-@utility text-warning {
-  color: var(--text-warning) !important;
-}
-
-@utility border-warning {
-  border-color: var(--border-warning);
-  border-width: 1px;
-  border-style: solid;
-}