/* ── Brand theme ─────────────────────────────────────────────────────────── */
:root {
  /* Backgrounds — near-black with very subtle purple depth */
  --color-base:    9 8 15;        /* #09080f */
  --color-surface: 14 12 28;      /* #0e0c1c */
  --color-raised:  21 19 37;      /* #151325 */

  /* Accent — teal as primary (calm, professional) */
  --color-accent:  136 206 211;   /* #88ced3 */

  /* Pink — secondary/brand highlight, muted */
  --color-pink:    168 68 148;    /* #a84494, toned-down fuchsia */

  /* Hex / rgba — used in plain CSS */
  --accent:        #88ced3;
  --accent-10:     rgba(136, 206, 211, 0.10);
  --accent-30:     rgba(136, 206, 211, 0.30);
  --pink:          #a84494;
  --pink-10:       rgba(168, 68, 148, 0.10);
  --pink-30:       rgba(168, 68, 148, 0.30);
  --border-color:  #1a1828;
}

/* ── Focus visibility ────────────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Badge variants — used in routes table and playground.
   Plain CSS so IDE doesn't warn about @apply. */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 4px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  border: 1px solid;
}
.badge-get  { color: #34d399; background: rgba(52,211,153,0.10); border-color: rgba(52,211,153,0.20); }
.badge-post { color: var(--pink); background: var(--pink-10); border-color: var(--pink-30); }
.badge-put  { color: #fbbf24; background: rgba(251,191,36,0.10);  border-color: rgba(251,191,36,0.20);  }
.badge-del  { color: #f87171; background: rgba(248,113,113,0.10); border-color: rgba(248,113,113,0.20); }

/* Inline code pill — used in prose descriptions. */
.ic {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.75rem;
  color: #60a5fa;
  background: rgba(96,165,250,0.10);
  padding: 2px 6px;
  border-radius: 4px;
}