/* ============================================================
   RUNEBID themes — additive overrides on top of styles.css.
   Default theme = no overrides (the tokens in styles.css :root).
   Add new themes as [data-theme="name"] selector blocks.
   Font family overrides live on [data-font="..."] orthogonally,
   so theme and font can be combined freely.
   ============================================================ */

/* -------------------------------------------------------------
   FONT FAMILIES — independent from theme.
   Default = Barlow stack (already in styles.css base).
   Set via Settings → Appearance → Font.
   ------------------------------------------------------------- */

:root[data-font="inter"] body {
  font-family: "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0;
}
:root[data-font="inter"] .hdg,
:root[data-font="inter"] .modal__title,
:root[data-font="inter"] .page__title,
:root[data-font="inter"] .brand,
:root[data-font="inter"] .req-card__title,
:root[data-font="inter"] .order-row__title,
:root[data-font="inter"] .stat__label,
:root[data-font="inter"] .ach__name,
:root[data-font="inter"] .nav-item,
:root[data-font="inter"] .filter-pill,
:root[data-font="inter"] .btn,
:root[data-font="inter"] .tag,
:root[data-font="inter"] .trust,
:root[data-font="inter"] .label,
:root[data-font="inter"] .onboarding__title,
:root[data-font="inter"] .settings-section__title {
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  letter-spacing: 0.06em;
  font-weight: 600;
  text-transform: uppercase;
}

:root[data-font="mono"] body {
  font-family: "JetBrains Mono", "Cascadia Code", "Consolas", "SF Mono", monospace;
  letter-spacing: 0;
  font-size: 12px;
}
:root[data-font="mono"] .hdg,
:root[data-font="mono"] .modal__title,
:root[data-font="mono"] .page__title,
:root[data-font="mono"] .brand,
:root[data-font="mono"] .req-card__title,
:root[data-font="mono"] .order-row__title,
:root[data-font="mono"] .stat__label,
:root[data-font="mono"] .ach__name,
:root[data-font="mono"] .nav-item,
:root[data-font="mono"] .filter-pill,
:root[data-font="mono"] .btn,
:root[data-font="mono"] .tag,
:root[data-font="mono"] .trust,
:root[data-font="mono"] .label,
:root[data-font="mono"] .onboarding__title,
:root[data-font="mono"] .settings-section__title {
  font-family: "JetBrains Mono", "Consolas", monospace;
  letter-spacing: 0.06em;
  font-weight: 500;
  text-transform: uppercase;
}
:root[data-font="mono"] .onboarding__title { font-size: 22px; }



/* -------------------------------------------------------------
   FORGE theme — terminal/military aesthetic.
   Heavier letter-spacing, all-caps default text, punchier accents.
   Inspired by the Skill Forge UI (sibling project).
   ------------------------------------------------------------- */
:root[data-theme="forge"] {
  /* Surfaces: flatter, less translucent */
  --bg:   #05070C;
  --s1:   #0A0D14;
  --s2:   #0E121C;
  --s3:   #131826;
  --b1:   #1F2A40;
  --b2:   #2D3B58;

  /* Accents: hold close to default, slightly punchier green */
  --cyan:   #00C8FF;
  --gold:   #FFC233;
  --green:  #25FFA6;
  --red:    #FF4F60;
  --purple: #B47CFF;

  --t1: #D4E2F4;
  --t2: #8AA0BD;
  --t3: #4A5F80;
}

/* Body typography in Forge — condensed + letter-spaced everywhere */
:root[data-theme="forge"] body {
  font-family: "Barlow Condensed", "Barlow", system-ui, sans-serif;
  letter-spacing: 0.04em;
  font-weight: 500;
}

/* Pretty much everything that's "structural" leans on the condensed face */
:root[data-theme="forge"] .nav-item,
:root[data-theme="forge"] .filter-pill,
:root[data-theme="forge"] .btn,
:root[data-theme="forge"] .tag,
:root[data-theme="forge"] .trust,
:root[data-theme="forge"] .label,
:root[data-theme="forge"] .req-card__title,
:root[data-theme="forge"] .order-row__title,
:root[data-theme="forge"] .stat__label,
:root[data-theme="forge"] .ach__name,
:root[data-theme="forge"] .modal__title,
:root[data-theme="forge"] .page__title,
:root[data-theme="forge"] .brand {
  font-family: "Barlow Condensed", "Barlow", sans-serif;
  letter-spacing: 0.14em;
}

/* Heavier letter-spacing on chrome */
:root[data-theme="forge"] .page__title { letter-spacing: 0.20em; }
:root[data-theme="forge"] .brand       { letter-spacing: 0.30em; }
:root[data-theme="forge"] .modal__title { letter-spacing: 0.18em; }
:root[data-theme="forge"] .btn         { letter-spacing: 0.22em; }
:root[data-theme="forge"] .tag, :root[data-theme="forge"] .trust { letter-spacing: 0.18em; }
:root[data-theme="forge"] .nav-item    { letter-spacing: 0.22em; }
:root[data-theme="forge"] .filter-pill { letter-spacing: 0.18em; }

/* Body text everywhere a touch lighter, monospace-ish for descriptions */
:root[data-theme="forge"] .req-card__desc,
:root[data-theme="forge"] .muted,
:root[data-theme="forge"] .page__sub {
  font-family: "Barlow", sans-serif;
  letter-spacing: 0.04em;
  color: var(--t2);
}

/* Glass cards: flatter, more terminal */
:root[data-theme="forge"] .glass {
  background: rgba(10, 13, 20, 0.92);
  border-radius: 6px;
  border: 0.5px solid var(--b1);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
:root[data-theme="forge"] .glass:hover {
  border-color: rgba(37, 255, 166, 0.30);
  box-shadow: 0 0 18px rgba(37, 255, 166, 0.06);
}

/* Buttons in Forge: sharper, terminal feel */
:root[data-theme="forge"] .btn { border-radius: 4px; height: 30px; }
:root[data-theme="forge"] .btn--lg { height: 38px; }
:root[data-theme="forge"] .btn--sm { height: 24px; }

/* Inputs: sharper corners */
:root[data-theme="forge"] .input,
:root[data-theme="forge"] .textarea,
:root[data-theme="forge"] .select {
  border-radius: 4px;
  font-family: "Barlow", sans-serif;
  letter-spacing: 0.04em;
}

/* Top bar in Forge: thin scanline */
:root[data-theme="forge"] .topbar {
  background: linear-gradient(180deg, var(--s1) 0%, var(--bg) 100%);
  border-bottom-color: var(--b2);
}

/* Side nav: terminal indicator (caret-like prefix) */
:root[data-theme="forge"] .nav-item.is-active {
  background: rgba(37, 255, 166, 0.06);
  color: var(--green);
  box-shadow: inset 2px 0 0 var(--green);
}
:root[data-theme="forge"] .nav-item.is-active .nav-item__icon { color: var(--green); }

/* Filter pills: terminal toggle look */
:root[data-theme="forge"] .filter-pill {
  border-radius: 4px;
}
:root[data-theme="forge"] .filter-pill.is-active {
  color: var(--green);
  border-color: rgba(37, 255, 166, 0.55);
  background: rgba(37, 255, 166, 0.08);
}

/* Tags */
:root[data-theme="forge"] .tag { border-radius: 4px; }
:root[data-theme="forge"] .tag--live { color: var(--green); border-color: rgba(37,255,166,0.4); background: rgba(37,255,166,0.08); }

/* Trust badges: square */
:root[data-theme="forge"] .trust { border-radius: 4px; }

/* Stat values use mono — keep that, but bump weight */
:root[data-theme="forge"] .stat__value,
:root[data-theme="forge"] .req-card__budget,
:root[data-theme="forge"] .balance-pill__amount,
:root[data-theme="forge"] .hud-bar__balance {
  font-weight: 600;
}

/* Brand mark: filled solid square — Forge is less dreamy */
:root[data-theme="forge"] .brand__mark {
  background: var(--green);
  border-color: var(--green);
  box-shadow: 0 0 10px rgba(37,255,166,0.55), inset 0 0 4px rgba(0,0,0,0.4);
}
:root[data-theme="forge"] .brand__mark::after { background: var(--bg); opacity: 1; inset: 6px; }
:root[data-theme="forge"] .brand { color: var(--green); text-shadow: 0 0 10px rgba(37,255,166,0.4); }

/* Page header underline — sharper, brighter */
:root[data-theme="forge"] .page__header { border-bottom: 1px solid var(--b1); }

/* HUD in Forge — green primary, sharper */
:root[data-theme="forge"] .hud-bar { border-radius: 6px; padding: 6px 12px; border-color: rgba(37,255,166,0.35); }
:root[data-theme="forge"] .hud-bar__brand { color: var(--green); text-shadow: 0 0 8px rgba(37,255,166,0.45); }
:root[data-theme="forge"] .hud-notif { border-color: rgba(37,255,166,0.45); box-shadow: 0 8px 30px rgba(0,0,0,0.6), 0 0 16px rgba(37,255,166,0.18); }
:root[data-theme="forge"] .hud-notif__brand { color: var(--green); text-shadow: 0 0 6px rgba(37,255,166,0.4); }
:root[data-theme="forge"] .hud-feed__brand { color: var(--green); }

/* Modal: less rounding */
:root[data-theme="forge"] .modal { border-radius: 6px; }