@import 'tailwindcss';
@plugin '@tailwindcss/forms';
@plugin '@tailwindcss/typography';

@theme {
  --font-display: "Orbitron", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  --font-sans: "Rajdhani", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  --font-mono: "Share Tech Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --color-bg: #0b0f17;
  --color-surface: #0f172a; /* slate-900 */
  --color-muted: #94a3b8; /* slate-400 */
  --color-neon: #22d3ee; /* cyan-400 */
  --color-neon-fuchsia: #ff00e5;
  --color-acid: #a3ff12;
  --color-accent: #00ffd1;
  --color-danger: #ff3b81;
}

:root {
  color-scheme: dark;
}

html, body {
  height: 100%;
}

body {
  @apply bg-bg text-white/90 antialiased;
}

p a {
  color: var(--color-neon);
  text-decoration: underline;
  text-decoration-color: rgba(34, 211, 238, 0.4);
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

p a:hover {
  color: color-mix(in srgb, var(--color-neon) 80%, white 20%);
  text-decoration-color: rgba(34, 211, 238, 0.85);
}

/* Utilities */
@utility btn-neon {
  @apply inline-flex items-center gap-2 rounded-md border border-neon/60 px-4 py-2 text-neon transition hover:border-neon hover:text-white focus:outline-none focus:ring-2 focus:ring-neon/50;
  box-shadow: 0 0 12px rgba(34, 211, 238, 0.30);
}

.btn-neon:hover {
  box-shadow: 0 0 24px rgba(34, 211, 238, 0.60);
}

@utility card-surface {
  @apply rounded-xl bg-surface/60 ring-1 ring-white/10 backdrop-blur-md shadow-[0_0_30px_rgba(34,211,238,0.06)] hover:shadow-[0_0_45px_rgba(255,0,229,0.10)] transition;
}

@utility neon-text {
  @apply text-transparent bg-clip-text bg-gradient-to-r from-neon via-accent to-neon-fuchsia;
}

input[type='checkbox'] {
  appearance: none;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 0.35rem;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background-color: rgba(15, 23, 42, 0.85);
  display: grid;
  place-content: center;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
  cursor: pointer;
}

input[type='checkbox']::after {
  content: '';
  width: 0.55rem;
  height: 0.55rem;
  clip-path: polygon(14% 44%, 0 60%, 43% 100%, 100% 16%, 86% 0, 40% 64%);
  background-color: transparent;
  transform: scale(0.4) rotate(6deg);
  opacity: 0;
  transition: opacity 0.12s ease, transform 0.12s ease, background-color 0.12s ease;
}

input[type='checkbox']:hover {
  border-color: rgba(94, 234, 212, 0.4);
}

input[type='checkbox']:focus-visible {
  outline: none;
  border-color: rgba(94, 234, 212, 0.6);
  box-shadow: 0 0 0 2px rgba(94, 234, 212, 0.25);
}

input[type='checkbox']:checked {
  border-color: rgba(34, 211, 238, 0.8);
  background-color: rgba(34, 211, 238, 0.18);
  box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.2);
}

input[type='checkbox']:checked::after {
  background-color: var(--color-neon);
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

input[type='checkbox']:disabled {
  cursor: not-allowed;
  opacity: 0.55;
  box-shadow: none;
  border-color: rgba(148, 163, 184, 0.2);
}