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

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 221.2 83.2% 53.3%;
    --primary-foreground: 210 40% 98%;
    --primary-soft: 228 96% 89%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --secondary-soft: 220 13% 91%;
    --tertiary: 262.1 83.3% 57.8%;
    --tertiary-foreground: 210 20% 98%;
    --tertiary-soft: 250.5 95.24% 91.76%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --accent-soft: 220 13% 91%;
    --info: 210 100% 30%;
    --info-foreground: 210 40% 98%;
    --info-soft: 213.33 96.92% 87.25%;
    --warning: 45 60% 32%;
    --warning-foreground: 210 40% 98%;
    --warning-soft: 48 100% 96.08%;
    --success: 140 100% 27%;
    --success-foreground: 210 40% 98%;
    --success-soft: 141 78.95% 85.1%;
    --danger: 0 74% 42%;
    --danger-foreground: 210 40% 98%;
    --danger-soft: 0 96.3% 89.41%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 224.3 76.3% 48%;
    --link: 203 98% 50%;
    --radius: 0.5rem;
    --chart-1: 221.2 83.2% 53.3%;
    --chart-2: 212 95% 68%;
    --chart-3: 216 92% 60%;
    --chart-4: 210 98% 78%;
    --chart-5: 212 97% 87%;
  }

  .dark,
  [data-theme='dark'] {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 217.2 91.2% 59.8%;
    --primary-foreground: 210 40% 98%;
    --primary-soft: 228 96% 89%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --secondary-soft: 220 2% 29%;
    --tertiary: 263.4 70% 50.4%;
    --tertiary-foreground: 210 20% 98%;
    --tertiary-soft: 250.5 95.24% 91.76%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --accent-soft: 220 2% 29%;
    --info: 210 100% 70%;
    --info-foreground: 210 40% 98%;
    --info-soft: 213.33 96.92% 87.25%;
    --warning: 45 60% 32%;
    --warning-foreground: 210 40% 98%;
    --warning-soft: 48 100% 96.08%;
    --success: 140 100% 27%;
    --success-foreground: 210 40% 98%;
    --success-soft: 141 78.95% 85.1%;
    --danger: 0 74% 42%;
    --danger-foreground: 210 40% 98%;
    --danger-soft: 0 96.3% 89.41%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 224.3 76.3% 48%;
    --link: 203 98% 50%;
    --chart-1: 221.2 83.2% 53.3%;
    --chart-2: 212 95% 68%;
    --chart-3: 216 92% 60%;
    --chart-4: 210 98% 78%;
    --chart-5: 212 97% 87%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  html {
    scroll-behavior: smooth;
  }
  body {
    @apply size-full bg-background text-foreground antialiased;
    font-feature-settings:
      'rlig' 1,
      'calt' 1;
  }
}

@layer utilities {
  .step {
    counter-increment: step;
  }

  .step:before {
    @apply absolute inline-flex h-9 w-9 items-center justify-center rounded-full border-4 border-background bg-muted text-center -indent-px font-mono text-base font-medium;
    @apply ml-[-50px] mt-[-4px];
    content: counter(step);
  }

  .custom[type='checkbox']:checked {
    background-image: url('data:image/svg+xml,%3csvg viewBox=%270 0 16 16%27 fill=%27white%27 xmlns=%27http://www.w3.org/2000/svg%27%3e%3cpath d=%27M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z%27/%3e%3c/svg%3e');
  }
  .custom[type='radio']:checked {
    background-image: url('data:image/svg+xml,%3csvg viewBox=%270 0 16 16%27 fill=%27white%27 xmlns=%27http://www.w3.org/2000/svg%27%3e%3ccircle cx=%278%27 cy=%278%27 r=%273%27/%3e%3c/svg%3e');
  }

  .custom[type='checkbox']:checked,
  .custom[type='radio']:checked {
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
  }

  .word-break {
    word-break: break-word;
  }

  input[type='number']::-webkit-inner-spin-button,
  input[type='number']::-webkit-outer-spin-button {
    @apply appearance-none;
  }
}

@media (max-width: 640px) {
  .container {
    @apply px-4;
  }
}