@clubmed/trident-ui 2.0.0-alpha.5 → 2.0.0-alpha.6

package/styles/globals.css

@@ -1,858 +1 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Newsreader:opsz,wght@6..72,700&display=swap');
-
-@import 'tailwindcss';
-@import 'tw-animate-css';
-
-/* TRIDENT THEME START */
-
-@custom-variant hocus {
-  @media (hover: hover) and (pointer: fine) {
-    &:hover,
-    &:focus {
-      @slot;
-    }
-  }
-}
-
-@custom-variant popover ('open', '&:popover-open');
-
-@utility animation-delay-* {
-  animation-delay: --value([integer]);
-  animation-delay: --value(integer);
-  animation-delay: --value(--animation-delay- *);
-}
-
-@theme {
-  /* Colors */
-  --color-black: hsl(0deg 0% 0%);
-  --color-ultramarine: hsl(227deg 38% 19%);
-  --color-lavender: hsl(229deg 80% 79%);
-  --color-verdigris: hsl(163deg 12% 71%);
-  --color-sand: hsl(35deg 18% 80%);
-  --color-lightSand: hsl(32deg 45% 94%);
-  --color-saffron: hsl(45deg 100% 50%);
-  --color-sienna: hsl(13deg 48% 39%);
-  --color-wave: hsl(180deg 100% 25%);
-  --color-marygold: hsl(35deg 100% 49%);
-  --color-white: hsl(0deg 0% 100%);
-  --color-darkGrey: hsl(0deg 0% 20%);
-  --color-middleGrey: hsl(0deg 0% 40%);
-  --color-grey: hsl(0deg 0% 60%);
-  --color-lightGrey: hsl(0deg 0% 80%);
-  --color-pearl: hsl(0deg 0% 97%);
-  --color-green: hsl(131deg 89% 29%);
-  --color-red: hsl(9deg 79% 42%);
-  --color-orange: hsl(25deg 100% 39%);
-
-  --color-black-active: hsl(0deg 0% 20%);
-  --color-ultramarine-active: hsl(227deg 38% 29%);
-  --color-lavender-active: hsl(229deg 80% 74%);
-  --color-verdigris-active: hsl(163deg 12% 66%);
-  --color-sand-active: hsl(35deg 18% 75%);
-  --color-lightSand-active: hsl(40deg 36% 85%);
-  --color-saffron-active: hsl(45deg 100% 45%);
-  --color-sienna-active: hsl(13deg 48% 44%);
-  --color-wave-active: hsl(180 100% 22%);
-  --color-marygold-active: hsl(35 100% 49%);
-  --color-white-active: hsl(0deg 0% 80%);
-  --color-green-active: hsl(131deg 89% 19%);
-  --color-red-active: hsl(9deg 79% 32%);
-  --color-orange-active: hsl(25deg 100% 29%);
-
-  /* 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-inherit: inherit;
-  --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: 7.5rem;
-  --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 */
-
-  /* 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: 0.0625rem;
-
-  --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-backdropFadeIn: backdropFadeIn 220ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards; /* NOT IN DCX */
-  --animate-backdropFadeOut: backdropFadeOut 180ms cubic-bezier(0.4, 0, 1, 1) forwards; /* NOT IN DCX */
-  --animate-backdropSweepIn: backdropSweepIn 300ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards; /* NOT IN DCX */
-  --animate-backdropSweepOut: backdropSweepOut 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-bounceEnter: bounceEnter 500ms linear;
-  --animate-bounceEnterStrong: bounceEnterStrong 600ms linear;
-  --animate-bounceExit: bounceExit 500ms linear;
-  --animate-filling: filling 10s linear;
-  --animate-loaderDash: loaderDash 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-rotatesIn: rotatesIn 0.4s ease-in-out;
-  --animate-slideDown: slideDown 0.5s ease-out;
-  --animate-slideRightEnter: slideRightEnter 0.4s ease;
-  --animate-slideRightExit: slideRightExit 0.4s ease;
-  --animate-slideUp: slideUp 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-toastEnter: toastEnter 0.4s ease; /* NOT IN DCX */
-  --animate-toastExit: toastExit 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-zoomIn: zoomIn 220ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards; /* NOT IN DCX */
-  --animate-zoomOut: zoomOut 180ms cubic-bezier(0.4, 0, 1, 1) forwards; /* NOT IN DCX */
-}
-
-@keyframes boop {
-  0% {
-    transform: scale(1);
-  }
-  25% {
-    transform: scale(0.98);
-  }
-  75% {
-    transform: scale(1.025);
-  }
-  100% {
-    transform: scale(1);
-  }
-}
-
-@keyframes bounceEnter {
-  0% {
-    opacity: 0;
-    transform: scale(0.5);
-  }
-  70% {
-    opacity: 1;
-    transform: scale(1.2);
-  }
-  100% {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
-@keyframes bounceEnterStrong {
-  0% {
-    opacity: 0;
-    transform: scale(0.5);
-  }
-  70% {
-    opacity: 1;
-    transform: scale(1.5);
-  }
-  100% {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
-@keyframes bounceExit {
-  0% {
-    opacity: 1;
-    transform: scale(1);
-  }
-  100% {
-    opacity: 0;
-    transform: scale(0.5);
-  }
-}
-
-@keyframes filling {
-  0% {
-    transform: scaleX(0);
-  }
-  100% {
-    transform: scaleX(1);
-  }
-}
-
-@keyframes loaderDash {
-  0% {
-    stroke-dashoffset: 38;
-    stroke-dasharray: 38;
-  }
-  50% {
-    stroke-dashoffset: 70;
-    stroke-dasharray: 70;
-    transform: rotate(180deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes pulsation {
-  50% {
-    opacity: 0.5;
-  }
-}
-
-@keyframes pulse {
-  25% {
-    transform: scale(1.25);
-  }
-  50% {
-    transform: scale(1);
-  }
-}
-
-@keyframes rotatesIn {
-  0% {
-    transform: translateY(-20px);
-    opacity: 0;
-  }
-  100% {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
-
-@keyframes slideDown {
-  0% {
-    transform: translateY(var(--tw-slideDown, -100%));
-  }
-  100% {
-    transform: translateY(0%);
-  }
-}
-
-@keyframes slideRightEnter {
-  0% {
-    transform: translateX(100%);
-    opacity: 0;
-  }
-  100% {
-    transform: translateX(0%);
-    opacity: 1;
-  }
-}
-
-@keyframes slideRightExit {
-  0% {
-    transform: translateX(0%);
-  }
-  100% {
-    transform: translateX(101%);
-  }
-}
-
-@keyframes slideUp {
-  0% {
-    transform: translateY(var(--tw-slideUp, 100%));
-  }
-  100% {
-    transform: translateY(0%);
-  }
-}
-
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes tick {
-  0% {
-    transform: rotateX(0deg);
-  }
-  100% {
-    transform: rotateX(-180deg);
-  }
-}
-
-@keyframes tock {
-  0% {
-    transform: rotateX(180deg);
-  }
-  100% {
-    transform: rotateX(0deg);
-  }
-}
-
-@keyframes wave {
-  0% {
-    transform: translate(100px, 140px);
-  }
-  10% {
-    transform: translate(100px, 140px);
-  }
-  100% {
-    transform: translate(0px, 0px);
-  }
-}
-
-@keyframes backdropFadeIn {
-  0% {
-    backdrop-filter: blur(0px);
-    opacity: 0;
-  }
-  100% {
-    backdrop-filter: blur(10px);
-    opacity: 0.8;
-  }
-}
-
-@keyframes backdropFadeOut {
-  0% {
-    backdrop-filter: blur(10px);
-    opacity: 0.8;
-  }
-  100% {
-    backdrop-filter: blur(0px);
-    opacity: 0;
-  }
-}
-
-@keyframes backdropSweepIn {
-  0% {
-    backdrop-filter: blur(0px);
-    opacity: 0;
-    transform: translateX(-100%);
-  }
-  100% {
-    backdrop-filter: blur(10px);
-    opacity: 0.8;
-    transform: translateX(0%);
-  }
-}
-
-@keyframes backdropSweepOut {
-  0% {
-    backdrop-filter: blur(10px);
-    opacity: 0.8;
-    transform: translateX(0%);
-  }
-  100% {
-    backdrop-filter: blur(0px);
-    opacity: 0;
-    transform: translateX(100%);
-  }
-}
-
-@keyframes bounce {
-  0%,
-  100% {
-    transform: translateY(-25%);
-    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
-  }
-  50% {
-    transform: none;
-    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
-  }
-}
-
-@keyframes ping {
-  75%,
-  100% {
-    transform: scale(2);
-    opacity: 0;
-  }
-}
-
-@keyframes toastEnter {
-  0% {
-    transform: translateX(100%);
-    opacity: 0;
-  }
-  100% {
-    transform: translateX(0%);
-    opacity: 1;
-  }
-}
-
-@keyframes toastExit {
-  0% {
-    transform: translateX(0%);
-  }
-  100% {
-    transform: translateX(101%);
-  }
-}
-
-@keyframes zoomIn {
-  0% {
-    transform: scale(0.3);
-    opacity: 0.3;
-  }
-  100% {
-    transform: scale(1);
-    opacity: 1;
-  }
-}
-
-@keyframes zoomOut {
-  0% {
-    transform: scale(1);
-    opacity: 1;
-  }
-  100% {
-    transform: scale(0.9);
-    opacity: 0;
-  }
-}
-
-@layer components {
-  html {
-    --xDirCoefficient: 1;
-    scroll-behavior: smooth;
-  }
-
-  html[dir='rtl'] {
-    --xDirCoefficient: -1;
-  }
-
-  /* LINKS */
-  .link-underline {
-    @apply transition-["background-size"];
-    @apply duration-1000;
-
-    background-image: linear-gradient(transparent calc(100% - 1px), currentcolor 1px);
-    background-repeat: no-repeat;
-    background-size: calc(100% - 0px) 100%;
-  }
-
-  .link-underline.has-icon {
-    background-size: calc(100% - 32px) 100%;
-  }
-
-  .link-container:hover .link-underline.hoverable,
-  .link-container:focus .link-underline.hoverable,
-  .group:hover .link-underline.hoverable,
-  .group:focus .link-underline.hoverable {
-    background-size: calc(0% - 0px) 100%;
-  }
-
-  .group:hover .link-underline.hoverable,
-  .group:focus .link-underline.hoverable {
-    background-size: calc(0% - 0px) 100%;
-  }
-
-  [dir='rtl'] .link-underline {
-    background-position: right;
-  }
-
-  /* INPUTS */
-
-  /* Remove the reset button in active inputs */
-  input[type='search']::-webkit-search-cancel-button,
-  input[type='number']::-webkit-inner-spin-button,
-  input[type='number']::-webkit-outer-spin-button {
-    @apply appearance-none;
-  }
-  input[type='password']::-ms-reveal {
-    display: none;
-  }
-
-  select:invalid {
-    @apply text-middleGrey;
-  }
-
-  .date-field {
-    @apply appearance-none;
-  }
-
-  .date-field::-webkit-calendar-picker-indicator {
-    @apply hidden;
-  }
-
-  .date-field::-webkit-datetime-edit {
-    @apply w-full;
-  }
-
-  .date-field::-webkit-datetime-edit-fields-wrapper {
-    @apply w-full;
-    @apply flex;
-    @apply justify-between;
-    @apply uppercase;
-  }
-}
-
-/* TRIDENT THEME END */
-
-@layer components {
-  [data-rehype-pretty-code-figure] {
-    background-color: var(--color-code);
-    color: var(--color-code-foreground);
-    border-radius: var(--radius-lg);
-    border-width: 0px;
-    border-color: var(--border);
-    margin-top: calc(var(--spacing) * 6);
-    overflow: hidden;
-    font-size: var(--text-sm);
-    outline: none;
-    position: relative;
-    @apply -mx-1 md:-mx-1;
-
-    &:has([data-rehype-pretty-code-title]) [data-slot='copy-button'] {
-      top: calc(var(--spacing) * 1.5) !important;
-    }
-  }
-
-  [data-rehype-pretty-code-title] {
-    border-bottom: color-mix(in oklab, var(--border) 30%, transparent);
-    border-bottom-width: 1px;
-    border-bottom-style: solid;
-    padding-block: calc(var(--spacing) * 2.5);
-    padding-inline: calc(var(--spacing) * 4);
-    font-size: var(--text-sm);
-    font-family: var(--font-mono);
-    color: var(--color-code-foreground);
-  }
-
-  [data-line-numbers] {
-    display: grid;
-    min-width: 100%;
-    white-space: pre;
-    border: 0;
-    background: transparent;
-    padding: 0;
-    counter-reset: line;
-    box-decoration-break: clone;
-  }
-
-  [data-line-numbers] [data-line]::before {
-    font-size: var(--text-sm);
-    counter-increment: line;
-    content: counter(line);
-    display: inline-block;
-    width: calc(var(--spacing) * 16);
-    padding-right: calc(var(--spacing) * 6);
-    text-align: right;
-    color: var(--color-code-number);
-    background-color: var(--color-code);
-    position: sticky;
-    left: 0;
-  }
-
-  [data-line-numbers] [data-highlighted-line][data-line]::before {
-    background-color: var(--color-code-highlight);
-  }
-
-  [data-line] {
-    padding-top: calc(var(--spacing) * 0.5);
-    padding-bottom: calc(var(--spacing) * 0.5);
-    min-height: calc(var(--spacing) * 1);
-    width: 100%;
-    display: inline-block;
-  }
-
-  [data-line] span {
-    color: var(--shiki-light);
-
-    @variant dark {
-      color: var(--shiki-dark) !important;
-    }
-  }
-
-  [data-highlighted-line],
-  [data-highlighted-chars] {
-    position: relative;
-    background-color: var(--color-code-highlight);
-  }
-
-  [data-highlighted-line] {
-    &:after {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 2px;
-      height: 100%;
-      content: '';
-      background-color: color-mix(in oklab, var(--muted-foreground) 50%, transparent);
-    }
-  }
-
-  [data-highlighted-chars] {
-    border-radius: var(--radius-sm);
-    padding-inline: 0.3rem;
-    padding-block: 0.1rem;
-    font-family: var(--font-mono);
-    font-size: 0.8rem;
-  }
-}
-
-/* DOCS */
-
-@custom-variant dark (&:is(.dark *));
-
-@custom-variant fixed (&:is(.layout-fixed *));
-
-@theme inline {
-  --breakpoint-3xl: 1600px;
-  --breakpoint-4xl: 2000px;
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
-  --color-sidebar-ring: var(--sidebar-ring);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar: var(--sidebar);
-  --color-chart-5: var(--chart-5);
-  --color-chart-4: var(--chart-4);
-  --color-chart-3: var(--chart-3);
-  --color-chart-2: var(--chart-2);
-  --color-chart-1: var(--chart-1);
-  --color-ring: var(--ring);
-  --color-input: var(--input);
-  --color-border: var(--border);
-  --color-destructive: var(--destructive);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-accent: var(--accent);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-muted: var(--muted);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-secondary: var(--secondary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-primary: var(--primary);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-popover: var(--popover);
-  --color-card-foreground: var(--card-foreground);
-  --color-card: var(--card);
-  --color-code: var(--code);
-  --color-code-foreground: var(--code-foreground);
-  --color-code-highlight: var(--code-highlight);
-  --color-code-number: var(--code-number);
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-  --color-surface: var(--surface);
-  --color-surface-foreground: var(--surface-foreground);
-  --color-code: var(--code);
-  --color-code-foreground: var(--code-foreground);
-  --color-code-highlight: var(--code-highlight);
-  --color-code-number: var(--code-number);
-  --color-selection: var(--selection);
-  --color-selection-foreground: var(--selection-foreground);
-}
-
-:root {
-  --heatmap-zero: rgb(221, 221, 221);
-  --header-height: calc(var(--spacing) * 12 + 1px);
-  --radius: 0.625rem;
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.205 0 0);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0.205 0 0);
-  --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.205 0 0);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
-  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
-  --surface: oklch(0.98 0 0);
-  --surface-foreground: var(--foreground);
-  --code: oklch(0.98 0 0);
-  --code-foreground: oklch(0.145 0 0);
-  --code-highlight: oklch(0.96 0 0);
-  --code-number: oklch(0.56 0 0);
-}
-
-.dark {
-  --heatmap-zero: rgb(51, 51, 51);
-  --background: oklch(0.145 0 0);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.205 0 0);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.205 0 0);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.922 0 0);
-  --primary-foreground: oklch(0.205 0 0);
-  --secondary: oklch(0.269 0 0);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
-  --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.269 0 0);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.704 0.191 22.216);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.556 0 0);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.205 0 0);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.269 0 0);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.556 0 0);
-  --code: oklch(0.2 0 0);
-  --code-foreground: oklch(0.708 0 0);
-  --code-highlight: oklch(0.27 0 0);
-  --code-number: oklch(0.72 0 0);
-  --selection: oklch(0.145 0 0);
-  --selection-foreground: oklch(1 0 0);
-}
-
-@layer base {
-  * {
-    @apply border-border outline-ring/50;
-  }
-
-  html {
-    @apply scroll-smooth;
-  }
-
-  body {
-    @apply bg-background text-foreground;
-  }
-}
-
-* {
-  scroll-margin-top: 80px;
-}
-
-@utility border-grid {
-  @apply border-border/50 dark:border-border;
-}
-
-@utility section-soft {
-  @apply from-background to-surface/40 dark:bg-background 3xl:fixed:bg-none bg-gradient-to-b;
-}
-
-@utility theme-container {
-  @apply font-sans;
-}
-
-@utility container-wrapper {
-  @apply 3xl:fixed:max-w-[calc(var(--breakpoint-2xl)+2rem)] mx-auto w-full px-2;
-}
-
-@utility container {
-  @apply 3xl:max-w-screen-2xl mx-auto max-w-[1400px] px-4 lg:px-8;
-}
-
-@utility no-scrollbar {
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-}
-
-@utility border-ghost {
-  @apply after:border-border relative after:absolute after:inset-0 after:border after:mix-blend-darken dark:after:mix-blend-lighten;
-}
-
-@utility step {
-  counter-increment: step;
-  @apply relative;
-
-  &:before {
-    @apply text-muted-foreground right-0 mr-2 hidden size-7 items-center justify-center rounded-full text-center -indent-px font-mono text-sm font-medium md:absolute;
-    content: counter(step);
-  }
-}
-
-@utility extend-touch-target {
-  @media (pointer: coarse) {
-    @apply relative touch-manipulation after:absolute after:-inset-2;
-  }
-}
+@import './index.css';