@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Rajdhani:wght@600;700&display=swap");

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

@layer base {
  html {
    scroll-behavior: smooth;
  }

  body {
    @apply bg-paper text-ink antialiased;
  }

  ::selection {
    @apply bg-flame text-white;
  }
}

@layer components {
  .section-shell {
    @apply mx-auto w-full max-w-6xl px-5 sm:px-6 lg:px-8;
  }

  .eyebrow {
    @apply text-[0.68rem] font-bold uppercase tracking-[0.16em] text-azure;
  }

  .btn-primary {
    @apply inline-flex items-center justify-center rounded-md bg-flame px-5 py-3 text-sm font-bold text-white shadow-lg shadow-orange-500/20 transition hover:bg-ember focus:outline-none focus:ring-2 focus:ring-flame focus:ring-offset-2;
  }

  .btn-secondary {
    @apply inline-flex items-center justify-center rounded-md border border-line bg-white px-5 py-3 text-sm font-bold text-azure transition hover:border-azure hover:bg-blue-50 focus:outline-none focus:ring-2 focus:ring-azure focus:ring-offset-2;
  }

  .nav-link {
    @apply text-sm font-semibold text-slate-700 transition hover:text-azure;
  }

  .feature-card {
    @apply rounded-lg border border-line bg-white p-5 shadow-sm transition hover:-translate-y-1 hover:shadow-soft;
  }

  .mini-icon {
    @apply flex h-9 w-9 items-center justify-center rounded-md text-base font-black text-white;
  }

  .glass-panel {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05));
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(16px);
  }

  .dash-screen {
    background:
      radial-gradient(circle at 20% 18%, rgba(249, 115, 22, 0.18), transparent 30%),
      radial-gradient(circle at 80% 18%, rgba(0, 110, 230, 0.22), transparent 32%),
      linear-gradient(135deg, #10243f 0%, #071323 52%, #132d4b 100%);
  }

  .dash-grid {
    background-image:
      linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
    background-size: 28px 28px;
  }

  .metric-bar {
    @apply h-2 rounded-full bg-slate-700;
  }

  .metric-fill {
    @apply block h-full rounded-full;
  }

  .case-display {
    background:
      linear-gradient(180deg, rgba(6, 24, 50, 0.05), rgba(6, 24, 50, 0.16)),
      linear-gradient(135deg, #10243f, #071323 48%, #123965);
  }
}
