@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: oklch(0.141 0.005 285.823);
    --foreground: oklch(0.985 0 0);
    --card: oklch(0.176 0.0055 285.854);
    --card-foreground: oklch(0.985 0 0);
    --popover: oklch(0.176 0.0055 285.854);
    --popover-foreground: oklch(0.985 0 0);
    --primary: oklch(0.985 0 0);
    --primary-foreground: oklch(0.141 0.005 285.823);
    --secondary: oklch(0.21 0.006 285.885);
    --secondary-foreground: oklch(0.629 0.0155 286.003);
    --muted: oklch(0.242 0.006 285.959);
    --muted-foreground: oklch(0.552 0.016 285.938);
    --accent: oklch(0.242 0.006 285.959);
    --accent-foreground: oklch(0.985 0 0);
    --destructive: oklch(0.396 0.141 25.723);
    --destructive-foreground: oklch(0.985 0 0);
    --danger: oklch(0.22 0.08 26.1);
    --danger-foreground: oklch(0.671 0.214 23.774);
    --danger-border: oklch(0.671 0.214 23.774);
    --warning: oklch(0.24 0.056 52);
    --warning-foreground: oklch(0.738 0.173 80.941);
    --warning-border: oklch(0.738 0.173 80.941);
    --info: oklch(0.24 0.08 268.5);
    --info-foreground: oklch(0.665 0.1895 257.22);
    --info-border: oklch(0.665 0.1895 257.22);
    --success: oklch(0.23 0.055 153);
    --success-foreground: oklch(0.627 0.194 149.214);
    --success-border: oklch(0.627 0.194 149.214);
    --border: oklch(0.322 0.0095 285.919);
    --input: oklch(0.21 0.006 285.885);
    --ring: oklch(0.406 0.015 285.796);
    --radius: 0.5rem;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  html {
    @apply md:scroll-smooth;
  }

  html[data-base-ui-scroll-locked] {
    @apply scroll-auto;
  }

  body {
    @apply bg-background text-foreground font-sans antialiased;
  }

  .Root {
    @apply isolate min-h-screen;
  }
}

@layer utilities {
  .container {
    @apply px-4 md:px-6 mx-auto max-w-screen-2xl lg:px-10 w-full;
  }

  .step {
    counter-increment: step;
  }

  .step:before {
    @apply absolute size-10 bg-muted rounded-full font-mono font-medium text-center text-sm inline-flex items-center justify-center -indent-px border-4 border-background ml-[-52px] mt-[-8px] tracking-tighter;
    content: counter(step);
  }
}

@layer base {
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--muted) transparent;
  }
  ::-webkit-scrollbar {
    width: 4px;
  }
  ::-webkit-scrollbar-track {
    background: transparent;
  }
  ::-webkit-scrollbar-thumb {
    background: var(--muted);
    border-radius: 4px;
  }
}
