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

@layer base {
  html {
    @apply bg-background text-on-background font-body antialiased;
    color-scheme: dark;
  }
  body {
    @apply min-h-screen selection:bg-primary/30 selection:text-on-primary-container;
  }
}

@layer components {
  /* ── Typography scale (DESIGN.md §3) ──────────────────────────────── */
  .display-lg {
    @apply font-headline text-7xl font-bold leading-[0.9] tracking-tighter md:text-8xl;
  }
  .display-md {
    @apply font-headline text-5xl font-bold leading-[0.9] tracking-tighter md:text-6xl;
  }
  .display-sm {
    @apply font-headline text-4xl font-bold leading-tight tracking-tighter md:text-5xl;
  }
  .headline-lg {
    @apply font-headline text-3xl font-bold tracking-tight md:text-4xl;
  }
  .title-lg {
    @apply font-headline text-2xl font-bold tracking-tight;
  }
  .body-lg {
    @apply font-body text-xl leading-relaxed text-on-surface-variant md:text-2xl;
  }
  .body-md {
    @apply font-body text-base leading-relaxed text-on-surface-variant;
  }
  .label-md {
    @apply font-label text-[10px] uppercase tracking-[0.3em] text-on-surface;
  }
  .label-sm {
    @apply font-label text-[8px] uppercase tracking-[0.4em] text-on-surface;
  }

  /* ── Dot-grid background (DESIGN.md §5) ──────────────────────────── */
  .dot-grid-bg {
    background-image: radial-gradient(
      rgba(129, 236, 255, 0.12) 1px,
      transparent 1px
    );
    background-size: 20px 20px;
  }

  /* ── Glass surface (DESIGN.md §2 Glass & Gradient rule) ──────────── */
  .glass {
    background-color: rgba(42, 44, 50, 0.6);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
  }

  /* ── Ghost border — containment felt rather than seen (DESIGN.md §4) */
  .ghost-border {
    border: 1px solid rgba(71, 72, 77, 0.15);
  }

  /* ── Neon CTA gradient (DESIGN.md §2 primary→primary_container) ──── */
  .neon-cta {
    background: linear-gradient(135deg, #81ecff 0%, #00e3fd 100%);
    color: #005762;
    box-shadow:
      0 0 32px 4px rgba(129, 236, 255, 0.25),
      0 0 4px 1px rgba(129, 236, 255, 0.5);
  }

  /* ── Technical grid (32px, hero variant) ─────────────────────────── */
  .technical-grid {
    background-image: radial-gradient(
      rgba(129, 236, 255, 0.15) 1px,
      transparent 1px
    );
    background-size: 32px 32px;
  }

  /* ── Hero ambient radial gradient ────────────────────────────────── */
  .hero-gradient {
    background:
      radial-gradient(circle at top right, rgba(129, 236, 255, 0.08), transparent 40%),
      radial-gradient(circle at bottom left, rgba(216, 115, 255, 0.05), transparent 40%);
  }
}
