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

:root {
  --font-display: 'Rajdhani', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

@layer base {
  html {
    color-scheme: dark;
  }
  html.light {
    color-scheme: light;
  }

  body {
    @apply bg-ink text-mist font-body antialiased;
    background-image: theme('backgroundImage.grid-glow');
    background-attachment: fixed;
  }

  html.light body {
    @apply bg-paper text-ink;
    background-image: none;
  }

  h1, h2, h3, h4 {
    @apply font-display tracking-wide;
  }

  /* Visible focus rings everywhere — the notched-panel aesthetic still
     needs a keyboard-accessible focus state. */
  :focus-visible {
    outline: 2px solid theme('colors.signal.DEFAULT');
    outline-offset: 2px;
    border-radius: 2px;
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

@layer components {
  /* The signature panel: glass fill + notched corners instead of the
     generic rounded-rectangle glassmorphism card. */
  .hud-panel {
    @apply relative border border-ink-line bg-ink-soft/70 backdrop-blur-md shadow-glass clip-notch;
  }
  html.light .hud-panel {
    @apply border-paper-line bg-white/70;
  }

  .hud-panel-sm {
    @apply relative border border-ink-line bg-ink-soft/60 backdrop-blur-md clip-notch-sm;
  }
  html.light .hud-panel-sm {
    @apply border-paper-line bg-white/60;
  }

  .stat-label {
    @apply font-mono text-[11px] uppercase tracking-[0.16em] text-haze;
  }

  .stat-value {
    @apply font-mono tabular-nums text-mist;
  }
  html.light .stat-value {
    @apply text-ink;
  }

  .chip {
    @apply inline-flex items-center gap-1.5 border border-ink-line bg-ink-soft/80 px-2.5 py-1 text-xs font-mono uppercase tracking-wide text-haze clip-notch-sm;
  }
  html.light .chip {
    @apply border-paper-line bg-white text-haze-deep;
  }

  .btn-primary {
    @apply inline-flex items-center justify-center gap-2 bg-ember px-5 py-3 font-display text-base font-semibold uppercase tracking-wide text-ink clip-notch-sm transition-transform hover:scale-[1.02] hover:bg-ember-dim active:scale-[0.99];
  }

  .btn-secondary {
    @apply inline-flex items-center justify-center gap-2 border border-signal/40 bg-transparent px-5 py-3 font-display text-base font-semibold uppercase tracking-wide text-signal clip-notch-sm transition-colors hover:bg-signal/10;
  }

  .prose-content {
    @apply max-w-none text-[15px] leading-relaxed text-mist/90;
  }
  html.light .prose-content {
    @apply text-ink/85;
  }
  .prose-content p + p {
    @apply mt-4;
  }
}
