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

html.light {
  color-scheme: light;
}

html.dark {
  color-scheme: dark;
}

body {
  @apply text-blue-950 antialiased transition-colors dark:text-slate-100;
  background-image:
    linear-gradient(180deg, #ffffff 0%, #f5f8ff 28%, #eef4ff 58%, #ffffff 100%);
}

.shell {
  @apply mx-auto max-w-7xl px-4 sm:px-6 lg:px-8;
}

.panel {
  @apply rounded-[1.75rem] border shadow-[0_30px_80px_rgba(28,25,23,0.08)] backdrop-blur transition-colors dark:shadow-[0_30px_80px_rgba(0,0,0,0.36)];
  border-color: rgb(231 229 228 / 0.8);
  background-color: rgb(255 255 255 / 0.82);
}

html.dark body {
  background-image:
    linear-gradient(180deg, #0a1128 0%, #0d1b38 35%, #07101e 100%);
}

html.dark .panel {
  border-color: rgb(30 60 140 / 0.40);
  background-color: rgb(11 25 55 / 0.72);
}

@layer utilities {
  .light body {
    color: rgb(28 25 23);
  }

  /* ── Dark mode: zinc classes → deep navy blue ─────────────── */
  .bg-zinc-950 {
    background-color: rgb(6 13 30);
  }

  .bg-zinc-950\/90 {
    background-color: rgb(6 13 30 / 0.9);
  }

  .bg-zinc-900 {
    background-color: rgb(11 25 55);
  }

  .bg-zinc-800,
  .bg-zinc-800\/50 {
    background-color: rgb(20 42 90);
  }

  .border-zinc-800,
  .border-zinc-700 {
    border-color: rgb(30 60 130);
  }

  .text-zinc-100,
  .text-zinc-200 {
    color: rgb(241 245 249);
  }

  .text-zinc-500 {
    color: rgb(148 163 184);
  }

  .text-zinc-400,
  .text-zinc-300 {
    color: rgb(100 116 139);
  }

  .hover\:bg-zinc-800:hover,
  .hover\:bg-zinc-800\/50:hover {
    background-color: rgb(30 55 115);
  }

  .hover\:text-zinc-200:hover {
    color: rgb(241 245 249);
  }

  /* ── Primary action (emerald class → orange) ──────────────── */
  .text-emerald-400 {
    color: rgb(251 146 60);
  }

  .bg-emerald-600 {
    background-color: rgb(234 88 12);
  }

  .hover\:bg-emerald-500:hover {
    background-color: rgb(194 65 12);
  }

  .dark .bg-emerald-600 {
    background-color: rgb(249 115 22);
  }

  .dark .hover\:bg-emerald-500:hover {
    background-color: rgb(251 146 60);
  }

  .bg-emerald-900\/30,
  .bg-emerald-950\/40,
  .bg-emerald-950\/50 {
    background-color: rgb(154 52 18 / 0.22);
  }

  .border-emerald-500 {
    border-color: rgb(249 115 22);
  }

  .focus\:ring-emerald-500:focus {
    --tw-ring-color: rgb(234 88 12 / 0.45);
  }

  .hover\:bg-emerald-900\/50:hover {
    background-color: rgb(154 52 18 / 0.35);
  }

  /* ── Light mode: zinc classes → white / stone-light ──────── */
  .light .bg-zinc-950 {
    background-color: rgb(255 253 248);
  }

  .light .bg-zinc-950\/90 {
    background-color: rgb(255 255 255 / 0.9);
  }

  .light .bg-zinc-900 {
    background-color: rgb(255 255 255 / 0.82);
  }

  .light .bg-zinc-800,
  .light .bg-zinc-800\/50 {
    background-color: rgb(245 245 244);
  }

  .light .border-zinc-800,
  .light .border-zinc-700 {
    border-color: rgb(231 229 228);
  }

  .light .text-zinc-100,
  .light .text-zinc-200 {
    color: rgb(28 25 23);
  }

  .light .text-zinc-500 {
    color: rgb(120 113 108);
  }

  .light .text-zinc-400,
  .light .text-zinc-300 {
    color: rgb(87 83 78);
  }

  .light .hover\:bg-zinc-800:hover,
  .light .hover\:bg-zinc-800\/50:hover {
    background-color: rgb(245 245 244);
  }

  .light .hover\:text-zinc-200:hover {
    color: rgb(28 25 23);
  }
}