/* ============================================================================
   Reppublika design tokens + base styling for costs-tracking.
   This file is the single source of truth for the visual language. The
   Pattern Library page (/pattern-library) renders everything defined here.
   Add/adjust tokens here — don't scatter ad-hoc colors across templates.
   ============================================================================ */

:root {
  /* --- Brand palette (sampled from the Reppublika logo) ------------------- */
  --rep-magenta:      #d6286e;
  --rep-magenta-600:  #b51f5d;
  --rep-purple:       #9d6bc0;
  --rep-purple-600:   #7e4fa3;
  --rep-gold:         #e8b84b;
  --rep-ink:          #1b1b1b;

  /* --- Accent / utility (meta links like the Pattern Library nav) -------- */
  --rep-accent:       #e8730c;
  --rep-accent-600:   #c75f08;

  /* --- Re-skin Bootstrap links to the brand magenta ---------------------- */
  --bs-link-color:            var(--rep-magenta);
  --bs-link-color-rgb:        214, 40, 110;
  --bs-link-hover-color:      var(--rep-magenta-600);
  --bs-link-hover-color-rgb:  181, 31, 93;
}

body {
  min-height: 100vh;
}

/* Accent nav link — used for utility/meta links (e.g. Pattern Library). */
.nav-link-accent {
  color: var(--rep-accent) !important;
  font-weight: 600;
}
.nav-link-accent:hover,
.nav-link-accent:focus {
  color: var(--rep-accent-600) !important;
}

/* Brand buttons — primary brand actions. Built on Bootstrap's button vars. */
.btn-brand {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--rep-magenta);
  --bs-btn-border-color: var(--rep-magenta);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--rep-magenta-600);
  --bs-btn-hover-border-color: var(--rep-magenta-600);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--rep-magenta-600);
  --bs-btn-active-border-color: var(--rep-magenta-600);
  --bs-btn-focus-shadow-rgb: 214, 40, 110;
}
.btn-outline-brand {
  --bs-btn-color: var(--rep-magenta);
  --bs-btn-border-color: var(--rep-magenta);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--rep-magenta);
  --bs-btn-hover-border-color: var(--rep-magenta);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--rep-magenta);
  --bs-btn-active-border-color: var(--rep-magenta);
  --bs-btn-focus-shadow-rgb: 214, 40, 110;
}

/* Brand text / accents */
.text-brand { color: var(--rep-magenta) !important; }
.bg-brand   { background-color: var(--rep-magenta) !important; color: #fff; }

/* --- Stat / KPI number ---------------------------------------------------- */
/* Canonical treatment for a headline metric (big number + unit + delta).
   The single source of truth so every page's KPIs read identically — Overview
   tiles and dashboard "stat" widgets both use these classes. Rendered in the
   Pattern Library. Colours are explicit (not the dashboards viz vars) so they
   resolve the same on any page. */
.stat-value      { font-size: clamp(1.4rem, 2.2vw, 2.1rem); font-weight: 700; line-height: 1.1; color: #212529; }
.stat-unit       { font-size: 0.55em; font-weight: 600; color: #898781; }
.stat-delta      { margin-top: 0.35rem; font-size: 0.8rem; font-weight: 600; color: #898781; }
.stat-delta.is-up   { color: #c0392b; } /* cost rising = alert */
.stat-delta.is-down { color: #1e7d4f; } /* cost falling = good */
.stat-delta-cap  { font-weight: 400; color: #898781; margin-left: 0.25rem; }

/* Pattern-library swatch helper */
.swatch {
  height: 64px;
  border-radius: .5rem;
  border: 1px solid rgba(0, 0, 0, .12);
}
.swatch-row code { font-size: .8rem; }

/* Default-board star toggle (dashboards) */
.star-toggle {
  border: 0;
  background: transparent;
  cursor: pointer;
  line-height: 1;
  font-size: 1.15rem;
  color: #c7c7c2;
  padding: 0 .1rem;
}
.star-toggle:hover { color: var(--rep-gold, #e8b84b); }
.star-toggle.is-on { color: var(--rep-gold, #e8b84b); }
.card-star { position: absolute; top: .45rem; right: .55rem; z-index: 2; }