/* Kool & The Gang ecosystem — shared tokens.
   Layout concept: an after-hours club that never closes — aubergine night, brass and coral light,
   a 1970s sunburst behind the type. Dark is the committed look for the fan site and HQ alike. */
:root {
  --night: #140f1e;
  --plum: #211832;
  --plum-2: #2f2245;
  --line: rgba(247, 236, 221, .12);
  --line-2: rgba(247, 236, 221, .22);
  --cream: #f7ecdd;
  --mist: #bcadcd;
  --brass: #e9b44c;
  --coral: #ff6f4f;
  --teal: #4cc7b5;
  --red: #ff5a5f;
  --display: "Shrikhand", "Cooper Black", Georgia, serif;
  --body: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --r: 14px;
  --gutter: clamp(16px, 4vw, 48px);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body { margin: 0; background: var(--night); color: var(--cream); font-family: var(--body); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: var(--brass); text-underline-offset: 3px; }
a:hover { color: var(--coral); }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; border-radius: 4px; }
img { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
.wrap { max-width: 1200px; margin-inline: auto; padding-inline: var(--gutter); }
.eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--brass); }
.muted { color: var(--mist); }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.btn { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 11px 20px; border: 1px solid var(--brass); background: var(--brass); color: var(--night); font-weight: 600; text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--coral); border-color: var(--coral); color: var(--night); }
.btn.ghost { background: transparent; color: var(--cream); border-color: var(--line-2); }
.btn.ghost:hover { border-color: var(--brass); color: var(--brass); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--mist); white-space: nowrap; }
.chip.ok { color: var(--teal); border-color: color-mix(in srgb, var(--teal) 45%, transparent); }
.chip.warn { color: var(--brass); border-color: var(--brass); }
.chip.bad { color: var(--red); border-color: color-mix(in srgb, var(--red) 45%, transparent); }
.chip.hot { color: var(--coral); border-color: color-mix(in srgb, var(--coral) 45%, transparent); }
.card { background: var(--plum); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; min-width: 0; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 13px; color: var(--mist); }
.field input, .field select, .field textarea { background: var(--night); border: 1px solid var(--line-2); border-radius: 10px; padding: 10px 12px; }
.field textarea { min-height: 96px; resize: vertical; }
.note-bar { font-family: var(--mono); font-size: 12px; color: var(--mist); }

[hidden] { display: none !important; }