/* ─────────────────────────────────────────────────────────────────
   Fairness Intelligence — shared design tokens & components
   Single source of truth for colors, type, and repeated UI patterns
   used across index.html and every docs/works/*.html page. Page-
   specific layout (hero, pillars, team grid, per-page accent colors)
   stays local to each file's own <style> block.
   ───────────────────────────────────────────────────────────────── */

:root {
  --bg:        #07070c;
  --bg2:       #0d0d1a;
  --bg3:       #111120;
  --gold:      #f0c040;
  --gold-dim:  rgba(240,192,64,0.15);
  --red:       #c0392b;
  --violet:    #7c3aed;
  --violet-2:  #a78bfa;
  --text:      rgba(255,255,255,0.88);
  /* 0.55 (not the visually-tempting 0.42) — the lower value measures
     ~3.8:1 against --bg, under the 4.5:1 WCAG AA floor for body-sized
     text. This still reads as "muted" but stays legible. */
  --muted:     rgba(255,255,255,0.55);
  --border:    rgba(255,255,255,0.07);
  --card:      rgba(255,255,255,0.035);
  --radius:    12px;
  --nav-h:     62px;
  --font-sans:  system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif: Georgia, 'Times New Roman', serif;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-serif);
  line-height: 1.7;
}
a { color: inherit; text-decoration: none; }
img { display: block; }

.sans { font-family: var(--font-sans); }
.gold  { color: var(--gold); }
.violet { color: var(--violet-2); }

/* Brand monogram badge used in every nav bar */
.brand-monogram {
  background: linear-gradient(135deg, #4f2d8a, #c0392b);
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color 0.2s;
}
.card:hover { border-color: rgba(255,255,255,0.15); }

a.pill {
  border: 1px solid rgba(240,192,64,0.35);
  color: var(--gold);
  transition: background 0.2s, border-color 0.2s;
}
a.pill:hover {
  background: rgba(240,192,64,0.08);
  border-color: rgba(240,192,64,0.6);
}

/* Scenario / mode toggle buttons used by the interactive worked examples */
.scenario-btn, .mode-btn {
  background: var(--card);
  border: 1px solid var(--border);
  transition: border-color .2s, background .2s;
}
.mode-btn:disabled { opacity: .35; cursor: not-allowed; }

/* Progress meters used by the interactive worked examples */
.meter-track {
  background: rgba(255,255,255,0.08);
  border-radius: 999px;
  height: 8px;
  overflow: hidden;
  position: relative;
}
.meter-fill {
  height: 100%;
  border-radius: 999px;
  transition: width .35s ease, background .35s ease;
}