/* ============================================================
   THE AMBO ELECTION MANAGER — Osun State Governorship 2026
   Design system tokens + base components
   Powered by Bravo Elections Management Systems

   Palette sampled from the official AMBO artwork:
     wordmark cyan  #1BA0CF
     panel navy     #213043
     APC red        #E31C23
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;0,8..60,700;1,8..60,400&family=Public+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

:root{
  /* ---- AMBO brand marks ---- */
  --ambo-cyan:#1ba0cf;   /* the wordmark blue */
  --ambo-navy:#213043;   /* the sign-in panel navy */
  --apc-red:#e31c23;     /* APC red — primary call to action */
  --apc-green:#1e8e3e;

  /* ---- Primary ramp: AMBO blue ----
     Named --g-* for continuity with the components built on this system;
     the ramp itself is the AMBO blue, not a green. */
  --g-900:#062b3d;   /* deepest — dark panel backgrounds */
  --g-800:#093a52;
  --g-700:#0e5679;   /* PRIMARY deep blue — headings, borders (7.7:1 on white) */
  --g-600:#116e99;   /* links, active states (5.4:1 on white) */
  --g-500:#1589bb;
  --g-400:#1ba0cf;   /* the logo cyan */
  --g-300:#63c3e4;
  --g-100:#d2ecf8;
  --g-50:#edf7fc;

  /* ---- Navy ramp: dark surfaces (login panel, sidebar, dark theme) ---- */
  --navy-900:#16202c;
  --navy-800:#1a2532;
  --navy-700:#202c3a;
  --navy-600:#213043;
  --navy-500:#2b3f55;
  --navy-400:#3a5673;

  /* ---- APC red ramp: primary action ---- */
  --red-700:#a6141a;
  --red-600:#c4171d;
  --red-500:#e31c23;
  --red-400:#ee4b50;
  --red-100:#fbdddd;
  --red-50:#fdefef;

  /* ---- Accent ramp (retained --gold-* names; now AMBO cyan) ---- */
  --gold-700:#0b4a69;
  --gold-600:#0e5679;
  --gold-500:#1ba0cf;
  --gold-400:#63c3e4;
  --gold-200:#b8e3f4;
  --gold-100:#e4f4fb;

  /* ---- Tricolour rule (retained --bao-* names; now AMBO / APC) ---- */
  --bao-blue:#1ba0cf;
  --bao-red:#e31c23;
  --bao-green:#1e8e3e;

  /* ---- Ink + neutrals (cool, faint blue tint) ---- */
  --ink-900:#111b26;
  --ink-700:#27333f;
  --ink-600:#3b4956;
  --ink-500:#54626f;   /* muted body */
  --ink-400:#75838f;
  --line:#e2e8ed;
  --line-2:#eff3f6;
  --surface:#ffffff;
  --bg:#f3f6f8;
  --bg-2:#ebf0f4;

  /* ---- Status ---- */
  --ok:#1e8e3e;
  --ok-bg:#e7f5eb;
  --warn:#b8860b;
  --warn-bg:#fbf2d8;
  --danger:#c4171d;
  --danger-bg:#fbe9e9;
  --info:#116e99;
  --info-bg:#e6f3f9;

  /* ---- Type ---- */
  --serif:"Source Serif 4", Georgia, serif;
  --sans:"Public Sans", system-ui, -apple-system, sans-serif;

  /* ---- Radius / shadow ---- */
  --r-sm:6px; --r-md:10px; --r-lg:16px; --r-xl:22px;
  --sh-1:0 1px 2px rgba(17,27,38,.05), 0 1px 3px rgba(17,27,38,.06);
  --sh-2:0 4px 14px rgba(17,27,38,.07), 0 2px 6px rgba(17,27,38,.05);
  --sh-3:0 18px 48px rgba(6,43,61,.16), 0 6px 16px rgba(6,43,61,.08);
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:var(--sans);
  color:var(--ink-900);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ---------- shared bits ---------- */
.badge{
  display:inline-flex;align-items:center;gap:6px;
  font:600 11.5px/1 var(--sans);letter-spacing:.04em;
  padding:5px 10px;border-radius:999px;text-transform:uppercase;
}
.badge.pending{color:var(--warn);background:var(--warn-bg);border:1px solid #efdca0}
.badge.resolved{color:var(--ok);background:var(--ok-bg);border:1px solid #bfe2cd}
.badge.review{color:var(--info);background:var(--info-bg);border:1px solid #c2dced}
.badge.urgent{color:var(--danger);background:var(--danger-bg);border:1px solid #f1c9c9}

.dot{width:7px;height:7px;border-radius:50%;display:inline-block}