@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%, #fafafa 28%, #f5f5f5 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, #172554 0%, #1b3068 35%, #0f1a40 100%);
}

html.dark .panel {
  border-color: rgb(30 64 175 / 0.40);
  background-color: rgb(23 37 84 / 0.72);
}

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

  /* ── Dark mode: zinc classes → deep navy blue ─────────────── */
  .bg-zinc-950 {
    background-color: #172554;
  }

  .bg-zinc-950\/90 {
    background-color: rgb(23 37 84 / 0.9);
  }

  .bg-zinc-900 {
    background-color: rgb(23 37 84 / 0.78);
  }

  .bg-zinc-800,
  .bg-zinc-800\/50 {
    background-color: rgb(30 58 138 / 0.5);
  }

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

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

  .text-zinc-500 {
    color: rgb(168 162 158);
  }

  .text-zinc-400,
  .text-zinc-300 {
    color: rgb(120 113 108);
  }

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

  .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);
  }
}