/* chillrust.org — shared site styling.
 *
 * Single source of truth for the warm sunset palette + base reset, used by
 *   - /                     (web/index.html)
 *   - /link                 (web/link/link.css extends this)
 *   - /reports/ai           (Worker-served, references via <link>)
 *
 * Palette pulled from the Philippines Rust header image — warm browns, gold
 * accent (#ffcc4d = "PHILIPPINES RUST" yellow), sky blue (#6fc4f0 = "Chill")
 * as secondary. Do NOT introduce cold blues, slate greys, or pure black
 * here without revisiting the brand fit.
 */

:root {
  color-scheme: dark;

  --bg:            #1c130e;   /* deep warm brown body */
  --bg-glow:       #2d1d10;   /* radial sunset glow under cards */
  --panel:         #261810;   /* warm brown card surface */
  --panel-inset:   #1f1309;   /* slightly darker inset / header strip */
  --text:          #f5e6c8;   /* warm cream — primary copy */
  --muted:         #a08a72;   /* warm taupe — secondary copy */
  --gold:          #ffcc4d;   /* primary accent — buttons, totals, focused state */
  --gold-deep:     #d99a1f;   /* gold hover / inset border */
  --sky:           #6fc4f0;   /* secondary accent — links, "Chill" callouts */
  --border:        #3a2718;   /* warm brown borders */
  --border-bright: #5a3d24;   /* slightly brighter for input borders */
  --err:           #e0533e;   /* error red */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font: 14px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: radial-gradient(ellipse at top, var(--bg-glow) 0%, var(--bg) 60%) fixed;
}

a { color: var(--sky); text-decoration: none; }
a:hover { color: var(--gold); }

/* ─── Shared top nav ────────────────────────────────────────────────────── */

.site-nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(31, 19, 9, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  padding: 0.75rem 1.25rem;
  display: flex; align-items: center; gap: 1.25rem;
  flex-wrap: wrap;
}
.site-nav .brand {
  font-weight: 700; color: var(--gold);
  letter-spacing: 0.02em; font-size: 1rem;
  white-space: nowrap;
}
.site-nav .brand:hover { color: var(--gold); }
.site-nav .spacer { flex: 1; }
.site-nav .links {
  list-style: none; padding: 0; margin: 0;
  display: flex; gap: 0.25rem; flex-wrap: wrap;
}
.site-nav .links a {
  display: block; padding: 0.4rem 0.75rem;
  color: var(--text); font-size: 0.9rem; font-weight: 500;
  border-radius: 6px;
  transition: background 120ms, color 120ms;
}
.site-nav .links a:hover {
  background: rgba(255, 204, 77, 0.08);
  color: var(--gold);
}
.site-nav .links a.is-active {
  background: var(--panel);
  color: var(--gold);
  border: 1px solid var(--border-bright);
}
.site-nav .discord {
  color: var(--sky); font-size: 0.85rem;
  padding: 0.4rem 0.75rem;
}

@media (max-width: 540px) {
  .site-nav { padding: 0.6rem 0.75rem; gap: 0.5rem; }
  .site-nav .brand { font-size: 0.95rem; }
  .site-nav .links a { padding: 0.35rem 0.55rem; font-size: 0.85rem; }
}