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

@layer base {
  body {
    @apply bg-base text-ink font-sans antialiased;
    background-image: radial-gradient(ellipse 70% 45% at 50% -10%, rgba(63, 211, 122, 0.07), transparent 70%);
    background-attachment: fixed;
  }

  ::selection {
    @apply bg-accent/30 text-ink;
  }

  a:focus-visible,
  button:focus-visible,
  input:focus-visible {
    @apply outline-none ring-2 ring-accent ring-offset-2 ring-offset-base;
  }
}

@layer components {
  .panel {
    @apply bg-base-panel border border-base-border rounded-xl;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0) 40%);
    box-shadow:
      0 1px 0 0 rgba(255, 255, 255, 0.04) inset,
      0 12px 32px -16px rgba(0, 0, 0, 0.65);
  }

  .stat-label {
    @apply text-xs uppercase tracking-wider text-ink-muted font-mono;
  }

  .mono {
    @apply font-mono text-sm;
  }

  /* Subtle lift + accent-tinted background on interactive rows, used
     across search results, tables, and lists so it's consistent everywhere. */
  .row-interactive {
    @apply transition-all duration-150;
  }
  .row-interactive:hover {
    background-color: rgba(63, 211, 122, 0.05);
  }

  /* Clearly visible separation between stacked list rows — a plain 1px
     divide-y read as almost invisible once rows have very different
     heights (e.g. a session with 15 map names next to one with 2). */
  .row-divide > * + * {
    border-top-width: 2px;
    border-top-color: theme('colors.base.divider');
  }
}