@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 {
  /* DESIGN.md: "Ghost Border" — containment that is felt rather than seen. */
  .ghost-border {
    border: 1px solid rgba(71, 72, 77, 0.15);
  }

  /* DESIGN.md: "Glass & Gradient" — frosted terminal effect. */
  .glass-card {
    background-color: rgba(42, 44, 50, 0.6);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
  }

  /* DESIGN.md: neon CTA — "lit from within" glow. */
  .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);
  }

  /* DESIGN.md: technical grid background pattern. */
  .technical-grid {
    background-image: radial-gradient(
      rgba(129, 236, 255, 0.15) 1px,
      transparent 1px
    );
    background-size: 32px 32px;
  }

  /* DESIGN.md: hero radial gradient ambient. */
  .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%);
  }
}
