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

body {
  @apply bg-white text-blue-950 antialiased transition-colors dark:text-slate-100;
}

html.dark body {
  background-image:
    linear-gradient(180deg, #0a1535 0%, #0d1f52 35%, #091228 100%);
}

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

.card {
  @apply rounded-[2rem] 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 .card {
  border-color: rgb(30 60 140 / 0.40);
  background-color: rgb(11 25 55 / 0.72);
}

.site-page {
  @apply min-h-screen overflow-hidden text-blue-950;
  background-image:
    linear-gradient(180deg, #ffffff 0%, #f5f8ff 28%, #eef4ff 58%, #ffffff 100%);
}

html.dark .site-page {
  @apply text-slate-100;
  background-image:
    linear-gradient(180deg, #0a1535 0%, #0d1f52 35%, #091228 100%);
}

.site-glow {
  background-image:
    radial-gradient(circle at top left, rgba(234, 88, 12, 0.24), transparent 34%),
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.18), transparent 26%);
}

html.dark .site-glow {
  background-image:
    radial-gradient(circle at top left, rgba(251, 146, 60, 0.22), transparent 34%),
    radial-gradient(circle at top right, rgba(96, 165, 250, 0.18), transparent 26%);
}

.site-section {
  @apply shell py-10 sm:py-14 lg:py-16;
}

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

html.dark .site-panel {
  border-color: rgb(30 60 140 / 0.40);
  background-color: rgb(11 25 55 / 0.72);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.36);
}

.site-panel-muted {
  @apply rounded-[2rem] border p-7 transition-colors sm:p-8;
  border-color: rgb(231 229 228 / 0.8);
  background-image: linear-gradient(160deg, #f5f8ff 0%, #edf2ff 100%);
}

html.dark .site-panel-muted {
  border-color: rgb(30 60 140 / 0.40);
  background-image: linear-gradient(160deg, #0c1830 0%, #10203e 100%);
}

.site-panel-contrast {
  @apply rounded-[2rem] border p-7 text-white shadow-[0_30px_80px_rgba(28,25,23,0.18)] transition-colors sm:p-8;
  border-color: rgb(14 40 90 / 0.8);
  background-color: rgb(10 25 75);
}

html.dark .site-panel-contrast {
  border-color: rgb(30 64 175);
}

.site-kicker {
  @apply text-xs font-bold uppercase tracking-[0.28em] text-orange-600 dark:text-orange-400;
}

.site-title {
  @apply mt-4 text-4xl font-black tracking-[-0.04em] text-blue-950 dark:text-white sm:text-5xl;
}

.site-lead {
  @apply mt-5 text-base leading-8 text-stone-600 dark:text-slate-300 sm:text-lg;
}

.site-link-primary {
  @apply rounded-full bg-orange-600 px-6 py-3 text-sm font-semibold text-white transition hover:bg-orange-700 dark:bg-orange-500 dark:hover:bg-orange-400;
}

.site-link-secondary {
  @apply rounded-full border border-stone-300 bg-white/85 px-6 py-3 text-sm font-semibold text-stone-700 transition hover:border-blue-900 hover:text-blue-900 dark:border-blue-800 dark:bg-blue-950/30 dark:text-blue-100 dark:hover:border-blue-400 dark:hover:text-white;
}