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

@layer base {
  :root {
    color-scheme: dark;
    --font-display: "Avenir Next Condensed", "Avenir Next", "Trebuchet MS", sans-serif;
    --font-body: "Avenir Next", "Segoe UI", sans-serif;
    --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  }

  * {
    box-sizing: border-box;
  }

  html {
    min-height: 100%;
    scroll-behavior: smooth;
  }

  body {
    min-height: 100vh;
    background:
      radial-gradient(circle at top left, rgba(56, 189, 248, 0.14), transparent 24%),
      radial-gradient(circle at 82% 18%, rgba(245, 158, 11, 0.11), transparent 24%),
      linear-gradient(180deg, #07111d 0%, #050a12 42%, #02060d 100%);
    color: #e2e8f0;
    font-family: var(--font-body);
  }

  body::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image:
      linear-gradient(rgba(148, 163, 184, 0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(148, 163, 184, 0.05) 1px, transparent 1px);
    background-size: 120px 120px;
    opacity: 0.18;
    pointer-events: none;
  }

  #root {
    min-height: 100vh;
    position: relative;
    z-index: 1;
  }
}

@layer components {
  .surface-card {
    @apply relative overflow-hidden rounded-[32px] border border-white/10 bg-slate-950/70 shadow-[0_24px_90px_rgba(2,6,23,0.5)] backdrop-blur-xl;
  }

  .surface-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(140deg, rgba(255, 255, 255, 0.06), transparent 35%, transparent 65%, rgba(56, 189, 248, 0.05));
    pointer-events: none;
  }

  .eyebrow {
    @apply text-[0.72rem] font-medium uppercase tracking-[0.34em] text-cyan-100/70;
  }

  .hero-title {
    font-family: var(--font-display);
    @apply text-4xl font-semibold leading-tight tracking-tight text-slate-50 md:text-5xl;
  }

  .section-title {
    font-family: var(--font-display);
    @apply text-2xl font-semibold tracking-tight text-slate-50;
  }

  .body-copy {
    @apply text-sm leading-8 text-slate-300 md:text-base;
  }

  .primary-btn {
    @apply inline-flex items-center justify-center rounded-full border border-cyan-300/30 bg-cyan-400/10 px-5 py-3 text-sm font-medium text-cyan-50 transition hover:border-cyan-200/40 hover:bg-cyan-400/20 disabled:cursor-not-allowed disabled:opacity-60;
  }

  .secondary-btn {
    @apply inline-flex items-center justify-center rounded-full border border-white/10 bg-white/5 px-5 py-3 text-sm font-medium text-slate-100 transition hover:border-white/20 hover:bg-white/10 disabled:cursor-not-allowed disabled:opacity-60;
  }

  .chip {
    @apply inline-flex items-center rounded-full border border-white/10 bg-white/5 px-3 py-2 text-xs uppercase tracking-[0.22em] text-slate-200;
  }

  .chip-success {
    @apply inline-flex items-center rounded-full border border-emerald-300/25 bg-emerald-400/10 px-3 py-2 text-xs uppercase tracking-[0.22em] text-emerald-100;
  }

  .chip-warning {
    @apply inline-flex items-center rounded-full border border-amber-300/25 bg-amber-400/10 px-3 py-2 text-xs uppercase tracking-[0.22em] text-amber-100;
  }

  .font-display {
    font-family: var(--font-display);
  }

  .glow-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(148, 163, 184, 0.35), transparent);
  }
}