@import "tailwindcss";

@custom-variant dark (&:where(.dark, .dark *));

@theme {
  --color-bg: #f8f6fd;
  --color-dbg: #100b26;

  --color-ink: #140e2e;
  --color-dink: #f5f3ff;
  --color-ink2: #2c2350;
  --color-dink2: #d9d4f0;

  --color-surface: #ffffff;
  --color-dsurf: #1b1538;

  --color-hair: #ece7f5;
  --color-dhair: #2a2350;
  --color-hair2: #f3f0fa;
  --color-dhair2: #241c4a;

  --color-muted: #75709b;
  --color-dmuted: #9d97c6;

  --tracking-tighter2: -0.03em;
  --tracking-tightest: -0.04em;

  --animate-pulseRing: pulseRing 2s ease-in-out infinite;
}

@keyframes pulseRing {
  0%, 100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 65%, transparent);
  }
  50% {
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 0%, transparent);
  }
}

:root {
  --accent: #ffb48a;
  --accent-soft: #fff0e5;
}

@utility accent-bg {
  background-color: var(--accent);
}
@utility accent-soft-bg {
  background-color: var(--accent-soft);
}
@utility accent-text {
  color: var(--accent);
}

@layer base {
  body {
    background-color: var(--color-bg);
  }
  .dark body {
    background-color: var(--color-dbg);
  }
  button:not(:disabled),
  [role="button"]:not(:disabled),
  [type="button"]:not(:disabled),
  [type="submit"]:not(:disabled),
  [type="reset"]:not(:disabled) {
    cursor: pointer;
  }
}

@layer components {
  .card-answer {
    @apply text-lg text-slate-800 leading-relaxed space-y-3;
  }
  .card-answer p {
    @apply leading-relaxed;
  }
  .card-answer strong {
    @apply font-semibold text-slate-900;
  }
  .card-answer em {
    @apply italic;
  }
  .card-answer code {
    @apply px-1.5 py-0.5 rounded bg-slate-100 text-slate-700 text-base font-mono;
  }
  .card-answer pre {
    @apply bg-slate-900 text-slate-100 rounded-lg p-4 overflow-x-auto text-sm;
  }
  .card-answer pre code {
    @apply bg-transparent text-inherit p-0;
  }
  .card-answer ul {
    @apply list-disc pl-6 space-y-1;
  }
  .card-answer ol {
    @apply list-decimal pl-6 space-y-1;
  }
  .card-answer li {
    @apply leading-relaxed;
  }
  .card-answer a {
    @apply text-emerald-700 hover:underline;
  }
  .card-answer blockquote {
    @apply border-l-4 border-slate-200 pl-4 text-slate-600 italic;
  }
}