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

@layer base {
  :root {
    --background: 225 38% 4%;
    --foreground: 220 47% 98%;
    --card: 225 30% 9%;
    --card-foreground: 220 47% 98%;
    --popover: 225 30% 9%;
    --popover-foreground: 220 47% 98%;
    --primary: 263 87% 57%;
    --primary-foreground: 0 0% 100%;
    --secondary: 225 24% 13%;
    --secondary-foreground: 220 47% 98%;
    --muted: 225 24% 13%;
    --muted-foreground: 220 14% 55%;
    --accent: 225 24% 16%;
    --accent-foreground: 220 20% 80%;
    --destructive: 354 100% 65%;
    --destructive-foreground: 0 0% 100%;
    --border: 222 24% 20%;
    --input: 222 24% 20%;
    --ring: 263 87% 57%;
    --chart-1: 263 87% 57%;
    --chart-2: 152 76% 52%;
    --chart-3: 354 100% 65%;
    --chart-4: 263 70% 72%;
    --chart-5: 152 70% 60%;
    --radius: 0.75rem;
    --font-heading: ui-sans-serif, system-ui, sans-serif;
    --font-body: ui-sans-serif, system-ui, sans-serif;
    --font-display: ui-sans-serif, system-ui, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --sidebar-background: 225 38% 5%;
    --sidebar-foreground: 220 20% 80%;
    --sidebar-primary: 263 87% 57%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 225 24% 13%;
    --sidebar-accent-foreground: 220 47% 98%;
    --sidebar-border: 222 24% 20%;
    --sidebar-ring: 263 87% 57%;
  }

  .dark {
    --background: 225 38% 4%;
    --foreground: 220 47% 98%;
    --card: 225 30% 9%;
    --card-foreground: 220 47% 98%;
    --popover: 225 30% 9%;
    --popover-foreground: 220 47% 98%;
    --primary: 263 87% 57%;
    --primary-foreground: 0 0% 100%;
    --secondary: 225 24% 13%;
    --secondary-foreground: 220 47% 98%;
    --muted: 225 24% 13%;
    --muted-foreground: 220 14% 55%;
    --accent: 225 24% 16%;
    --accent-foreground: 220 20% 80%;
    --destructive: 354 100% 65%;
    --destructive-foreground: 0 0% 100%;
    --border: 222 24% 20%;
    --input: 222 24% 20%;
    --ring: 263 87% 57%;
    --chart-1: 263 87% 57%;
    --chart-2: 152 76% 52%;
    --chart-3: 354 100% 65%;
    --chart-4: 263 70% 72%;
    --chart-5: 152 70% 60%;
    --sidebar-background: 225 38% 5%;
    --sidebar-foreground: 220 20% 80%;
    --sidebar-primary: 263 87% 57%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 225 24% 13%;
    --sidebar-accent-foreground: 220 47% 98%;
    --sidebar-border: 222 24% 20%;
    --sidebar-ring: 263 87% 57%;
  }
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }

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

@layer components {
  .bg-workshop { background: radial-gradient(circle at 78% -10%, rgba(126, 63, 242, 0.10), transparent 32%), radial-gradient(circle at 12% 112%, rgba(34, 211, 125, 0.06), transparent 30%), #07090F; }
  .panel { @apply rounded-2xl border border-shire-border bg-shire-panel shadow-[inset_0_1px_0_rgba(255,255,255,.04),0_14px_44px_rgba(0,0,0,.24)]; }
  .nav-link { @apply flex min-h-11 items-center gap-3 rounded-xl px-3 text-sm text-slate-400 transition hover:bg-shire-purple/5 hover:text-shire-purple-bright focus-visible:ring-2 focus-visible:ring-shire-purple; }
  .nav-link svg { @apply h-5 w-5 shrink-0; }
  .nav-link-active { @apply bg-shire-purple/10 text-shire-purple-bright; }
  .touch-btn, .icon-btn { @apply inline-flex min-h-11 min-w-11 items-center justify-center rounded-xl border border-shire-border text-slate-300 transition hover:border-shire-purple/40 hover:text-shire-purple-bright focus-visible:ring-2 focus-visible:ring-shire-purple; }
  .touch-btn svg, .icon-btn svg, .btn-primary svg, .btn-secondary svg { @apply h-4 w-4; }
  .btn-primary { @apply inline-flex min-h-11 items-center justify-center gap-2 rounded-xl bg-shire-purple px-4 py-2 text-sm font-semibold text-white transition hover:bg-shire-purple-bright focus-visible:ring-2 focus-visible:ring-shire-purple-bright disabled:cursor-not-allowed disabled:opacity-40; }
  .btn-secondary { @apply inline-flex min-h-11 items-center justify-center gap-2 rounded-xl border border-shire-border bg-shire-raised px-4 py-2 text-sm font-medium text-slate-200 transition hover:border-shire-purple/40 hover:text-shire-purple-bright focus-visible:ring-2 focus-visible:ring-shire-purple disabled:opacity-40; }
  .workshop-input { @apply mt-2 min-h-11 w-full rounded-xl border border-shire-border bg-black/30 px-4 py-2 text-slate-100 placeholder:text-slate-600 focus:border-shire-purple/60 focus:ring-2 focus:ring-shire-purple/20; }
  .section-title { @apply mb-4 text-sm font-semibold uppercase tracking-[0.14em] text-slate-300; }
  .choice-card { @apply flex min-h-12 cursor-pointer items-center gap-3 rounded-xl border border-shire-border bg-shire-raised px-4 py-3 text-sm text-slate-200 transition hover:border-shire-purple/40; }
  .choice-card:has(input:checked) { border-color: rgba(126, 63, 242, .5); background: rgba(126, 63, 242, .1); }
  .choice-card input { @apply h-5 w-5 accent-shire-purple; }
}

.large-touch .nav-link, .large-touch .btn-primary, .large-touch .btn-secondary, .large-touch .workshop-input { min-height: 3.5rem; }
.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
.high-contrast .panel { border-color: rgba(165, 107, 255, .55); }
.high-contrast .text-slate-500, .high-contrast .text-slate-400 { color: #e2e8f0 !important; }
.light .bg-workshop { background: radial-gradient(circle at 78% 0%, rgba(126, 63, 242, .12), transparent 30%), radial-gradient(circle at 12% 110%, rgba(34, 211, 125, .08), transparent 30%), #eef0f5; }
.light .panel { background: rgba(255, 255, 255, .96); border-color: #d6d9e2; }
.light .text-white { color: #1a1a2a !important; }
.light .text-slate-200, .light .text-slate-300, .light .text-slate-400 { color: #33373f !important; }
.light .text-slate-500 { color: #475569 !important; }
.light .workshop-input { background: #fff; border-color: #d6d9e2; color: #1a1a2a; }
.light aside, .light header { background-color: rgba(244, 246, 250, .97) !important; }