/* ============================================================================
   EMBER COMMAND THEME
   Applied 2026-08-30 — replaces the "hi-tech" magenta/cyan glass palette
   (forge-ui.css / forge-ui-v2.css) and the Gloock display font
   (forge-fonts.css) with the warm near-black / ember-orange tactical
   command-console system, and Inter as the sole typeface site-wide.

   This file works by redefining the shared design tokens (--bg, --surface,
   --purple, --font-heading, etc.) and then re-declaring the same shared
   chrome selectors (.topbar, .sidebar, .panel, .primary, .tag-*, ...) that
   forge-ui.css/forge-ui-v2.css already style, using !important so this file
   — loaded last among the shared theme files on every page — wins the
   cascade. It intentionally does NOT touch layout/structure (padding,
   grid, widths); only color, surface treatment, border, shadow, radius,
   and typography.
   ============================================================================ */

:root{
  /* Backgrounds — warm near-black, not pure black/purple */
  --bg:#090807!important;
  --surface:#100D0B!important;
  --surface-2:#151210!important;
  --bg-input:#12100F!important;
  --line:#292522!important;
  --line-subtle:#1D1A18!important;

  /* Text */
  --text:#F5F2EF!important;
  --muted:#A19B97!important;
  --muted-2:#77726E!important;

  /* BLK / Ember identity accent — repoints the site's existing --purple
     token, which is what most shared components consume */
  --purple:#E54225!important;
  --accent:#E54225!important;
  --accent-hover:#F04B2C!important;
  --accent-dark:#6E2518!important;

  /* Status colors — ember stays reserved for identity/primary actions */
  --blue:#5B8CFF!important;      /* informational / planning */
  --green:#3FBF7F!important;     /* confirmed / ready / completed */
  --orange:#D9A23E!important;    /* gold — estimated / pending / warning */
  --red:#E5484D!important;       /* urgent / failed / critical */
  --gray:#77726E!important;      /* inactive / unknown */

  /* Typography — Inter throughout, including what used to be the Gloock
     display font and the mono eyebrow/stat font */
  --font-ui:'Inter','Segoe UI',Arial,sans-serif!important;
  --font-heading:'Inter','Segoe UI',Arial,sans-serif!important;
  --font-mono:'Inter','Segoe UI',Arial,sans-serif!important;

  /* Radii */
  --radius-sm:8px;
  --radius-md:14px;
  --radius-lg:18px;
  --radius-xl:24px;
  --radius-pill:999px;
}

/* ---- Kill the neon glow orbs / grid overlays from the old glass theme --- */
body:before,body:after,.hero:after{
  display:none!important;
}
body{
  background:var(--bg)!important;
  background-image:none!important;
}
html,body{background-color:var(--bg)!important;color:var(--text)!important}

/* ---- Structural chrome: topbar, sidebar, alliance switch ---------------- */
.topbar{
  background:var(--bg)!important;
  border-bottom:1px solid var(--line)!important;
  backdrop-filter:none!important;
  box-shadow:none!important;
}
.sidebar{
  background:var(--surface)!important;
  border-right:1px solid var(--line)!important;
  backdrop-filter:none!important;
  box-shadow:none!important;
}
.alliance-switch{
  background:var(--surface-2)!important;
  border-color:var(--line)!important;
  backdrop-filter:none!important;
  box-shadow:none!important;
}
.brand-mark,.alliance-icon{
  background:var(--accent)!important;
  color:var(--text)!important;
  box-shadow:none!important;
}
.sidebar nav a,.sidebar-footer a{
  color:var(--muted)!important;
  border:1px solid transparent!important;
  border-radius:var(--radius-md)!important;
  background:transparent!important;
  box-shadow:none!important;
}
.sidebar nav a span{color:var(--muted)!important}
.sidebar nav a.active,.sidebar nav a:hover{
  background:var(--surface-2)!important;
  color:var(--text)!important;
  border-color:var(--accent-dark)!important;
  box-shadow:inset 3px 0 var(--accent)!important;
}
.sidebar nav a.active span,.sidebar nav a:hover span{color:var(--accent)!important}
.sidebar-footer p{color:var(--muted-2)!important}

/* ---- Cards / panels / hero — flat surfaces, borders do the work -------- */
.panel,.stats article,.calendar-panel,.auth-card{
  background:var(--surface)!important;
  border:1px solid var(--line)!important;
  border-radius:var(--radius-xl)!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  transform:none!important;
}
.panel:before,.panel:after,.stats article:before,.stats article:after,.calendar-panel:before,.calendar-panel:after{
  display:none!important;
}
.panel:hover,.stats article:hover,.calendar-panel:hover{
  transform:none!important;
  border-color:var(--accent-dark)!important;
  box-shadow:none!important;
}
.hero{
  background:var(--surface)!important;
  border:1px solid var(--accent-dark)!important;
  border-radius:var(--radius-xl)!important;
  backdrop-filter:none!important;
  box-shadow:none!important;
}
.hero h1 span{color:var(--accent)!important}

.stat-icon,.tool-icon{
  background:rgba(229,66,37,.14)!important;
  border:1px solid rgba(229,66,37,.3)!important;
  color:var(--accent)!important;
  box-shadow:none!important;
}
.stat-icon:after,.tool-icon:after{display:none!important}

.tool-card,.power-stats span,.member-live-grid span,.roster-metrics span{
  background:var(--surface-2)!important;
  border:1px solid var(--line)!important;
  border-radius:var(--radius-md)!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
}
.announcement{
  background:var(--surface)!important;
  border-color:var(--line)!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
}
.meter i{ background:var(--surface-2)!important; box-shadow:none!important; }
.meter em{ background:var(--accent)!important; box-shadow:none!important; }

/* ---- Buttons ------------------------------------------------------------ */
.primary{
  background:var(--accent)!important;
  color:var(--text)!important;
  border:0!important;
  border-radius:10px!important;
  box-shadow:none!important;
  font-weight:600!important;
}
.primary:hover{background:var(--accent-hover)!important}
.primary:after{display:none!important}
.outline{
  border:1px solid var(--line)!important;
  color:var(--text)!important;
  background:var(--surface-2)!important;
  border-radius:var(--radius-md)!important;
  box-shadow:none!important;
}
.outline:hover{
  border-color:var(--accent)!important;
  color:var(--text)!important;
  background:rgba(229,66,37,.08)!important;
}

/* ---- Tags / status pills -------------------------------------------------
   Ember stays the BLK identity color; status meaning is carried by the
   other four: gold = estimated/pending/warning, green = confirmed/ready,
   blue = informational/planning, red = urgent/failed/critical,
   gray = inactive/unknown. */
.tag{border:1px solid transparent!important;border-radius:var(--radius-pill)!important;box-shadow:none!important}
.tag-violet{background:rgba(229,66,37,.14)!important;border-color:rgba(229,66,37,.3)!important;color:#FF9A82!important}
.tag-blue{background:rgba(91,140,255,.14)!important;border-color:rgba(91,140,255,.3)!important;color:#AFC4FF!important}
.tag-neutral{background:var(--surface-2)!important;border-color:var(--line)!important;color:var(--muted)!important}
.tag-red{background:rgba(229,72,77,.14)!important;border-color:rgba(229,72,77,.32)!important;color:#FF9FA2!important}
.tag-gray{background:var(--surface-2)!important;border-color:var(--line)!important;color:var(--muted)!important}
.violet{background:rgba(229,66,37,.13)!important;color:var(--accent)!important}
.blue{background:rgba(91,140,255,.12)!important;color:#AFC4FF!important}
.orange{background:rgba(217,162,62,.14)!important;color:#F0C374!important}
.green{background:rgba(63,191,127,.12)!important;color:#7FE0AA!important}
.positive{color:var(--green)!important}
.negative{color:var(--red)!important}

.event{border-top-color:var(--line)!important}
.event time{
  background:rgba(229,66,37,.10)!important;
  border:1px solid rgba(229,66,37,.2)!important;
  color:var(--accent)!important;
  box-shadow:none!important;
}

.pin{color:var(--accent)!important}
.discord{color:#AFC4FF!important}

/* ---- Inputs --------------------------------------------------------------*/
input,select,textarea,.auth-card input,.auth-card select,.role-name-field input{
  background:var(--bg-input)!important;
  color:var(--text)!important;
  border:1px solid var(--line)!important;
  border-radius:var(--radius-md)!important;
}
input:focus,select:focus,textarea:focus{
  outline:1px solid var(--accent)!important;
  border-color:var(--accent)!important;
  box-shadow:0 0 0 3px rgba(229,66,37,.15)!important;
}
.auth-card{border-color:var(--line)!important;box-shadow:none!important}
.auth-dialog::backdrop{background:rgba(0,0,0,.72)!important;backdrop-filter:none!important}

/* ---- Member / roster avatars & live panel -------------------------------*/
.member-live-avatar,.roster-avatar{
  background:var(--accent)!important;
  color:var(--text)!important;
  box-shadow:none!important;
}
.avatar,.mini-avatar{
  background:var(--accent)!important;
  color:var(--text)!important;
  box-shadow:none!important;
}
.panel-head a{color:var(--accent)!important}
.csv-import{
  border:1px solid rgba(229,66,37,.3)!important;
  color:#FF9A82!important;
  background:transparent!important;
}
.member-live-details summary{color:var(--accent)!important}
.member-live-details pre{border-color:var(--line)!important;background:var(--bg)!important;color:var(--muted)!important}
.member-live-panel{border-top:2px solid var(--green)!important}
.member-live-panel .tag{background:rgba(63,191,127,.10)!important;border-color:rgba(63,191,127,.26)!important;color:#7FE0AA!important}

.mobile-nav{
  background:var(--bg)!important;
  border-top-color:var(--line)!important;
  backdrop-filter:none!important;
  box-shadow:none!important;
}
.mobile-nav .active{color:var(--accent)!important}

.blk-roster-private-notice{
  border:1px solid var(--line)!important;
  background:var(--surface)!important;
  color:var(--text)!important;
  box-shadow:none!important;
}

/* ============================================================================
   TYPOGRAPHY — Inter throughout, per the BLK type scale:
   Display/Card Title 30/700/-0.02em · Page Title 20/500/-0.01em ·
   Section Eyebrow 15(rendered ~11)/600/uppercase/+0.18em ·
   Subheading 17/600 · Body Large 19/400 · Body 16/400 ·
   Secondary/Metadata 15/400 · Button 16/600 · Badge 13/600/+0.02em ·
   Nav Label 14/400
   ============================================================================ */
body,body *{font-family:var(--font-ui)!important}

h1,h2,h3,.roster-card h3,.stats strong,.power-stats b,.member-live-grid b,.roster-metrics b,.command-clocks strong,.next-event-countdown,.kvk-countdown strong{
  font-family:var(--font-ui)!important;
  font-weight:700!important;
  letter-spacing:-0.02em!important;
}
.panel h2,.auth-card h2{
  font-weight:600!important;
  letter-spacing:0!important;
}
.hero h1{font-weight:700!important;letter-spacing:-0.02em!important}

.eyebrow,.panel small,.power-stats small,.member-live-grid small,.roster-metrics small,.stats small,.event time span,.panel-note,.sidebar-footer p,label small,.member-live-details pre{
  font-family:var(--font-ui)!important;
  font-weight:600!important;
  letter-spacing:.18em!important;
  text-transform:uppercase!important;
}

.primary,.outline{
  font-family:var(--font-ui)!important;
  font-weight:600!important;
  letter-spacing:0!important;
}
.tag{
  font-family:var(--font-ui)!important;
  font-weight:600!important;
  letter-spacing:.02em!important;
}
.sidebar nav a,.alliance-switch strong,.topbar{
  font-family:var(--font-ui)!important;
  font-weight:400!important;
  letter-spacing:0!important;
}