/* ==========================================================================
   BLACKMURAL MEDIA — EVENTS HUB
   base.css — design tokens, reset and shared utilities

   Token system (inherits the established Blackmural identity):
     --void      base background, near-black
     --panel     raised/secondary surface
     --paper     primary text on dark (warm off-white, not pure white)
     --muted     secondary text
     --line      hairline divider
     --gold      primary accent (racing gold, muted — not yellow)
     --gold-2    bright gold for hover/active states

   Type system (self-hosted, see css/fonts.css):
     Barlow Condensed  -> eyebrows, category labels, nav, buttons (tracked caps)
     Inter             -> headlines + body copy
     IBM Plex Mono     -> telemetry strip: dates, times, locations, codes
   ========================================================================== */

:root{
  --void:#0a0a0b;
  --panel:#141416;
  --panel-2:#1b1b1e;
  --paper:#f3f1ea;
  --muted:rgba(243,241,234,.56);
  --muted-2:rgba(243,241,234,.36);
  --line:rgba(243,241,234,.12);
  --line-strong:rgba(243,241,234,.22);
  --gold:#c6a15b;
  --gold-2:#e8c77e;
  --danger:#c65b5b;
  --ok:#7fae72;
  --radius:2px;
  --maxw:1280px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--void);
  color:var(--paper);
  font-family:'Inter',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
::selection{background:var(--gold);color:var(--void);}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}

.eyebrow{
  font-family:'Barlow Condensed',sans-serif;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-size:.78rem;
  color:var(--gold);
}
.mono{font-family:'IBM Plex Mono',monospace;}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
@media(min-width:900px){.wrap{padding:0 48px;}}

/* -------------------------------------------------------------- utilities
   These stand in for the inline style attributes the original single-file
   draft carried, so nothing styles itself from the markup. */
.eyebrow-flush{margin:0;}
.eyebrow-gap-sm{margin:0 0 8px;}
.eyebrow-gap-top{margin-top:16px;}

/* -------------------------------------------------------------- view switching
   The router toggles [hidden] on .view sections. */
.view[hidden]{display:none;}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important;}
  .event-row{opacity:1;transform:none;}
}