/* AQUIS Capital – e-voting shared styles
   Font: Candara (AQUIS standard). Candara ships with Windows/Office; on other
   devices the page falls back to the nearest humanist sans. To embed it, drop
   licensed Candara files into public/fonts/ – the @font-face below picks them up. */

@font-face {
  font-family: 'Candara';
  src: local('Candara'), url('../fonts/Candara.woff2') format('woff2'), url('../fonts/Candara.ttf') format('truetype');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'Candara';
  src: local('Candara Bold'), local('Candara-Bold'), url('../fonts/Candara-Bold.woff2') format('woff2'), url('../fonts/Candarab.ttf') format('truetype');
  font-weight: 700; font-display: swap;
}

:root {
  /* ---- Brand palette (edit here) ---- */
  --navy: #0F1F3F;
  --navy-2: #163062;
  --navy-3: #1E4A8A;
  --gold: #1FB4EA;   /* brand cyan (kept under the old name) */
  --gold-2: #8ED9F7;
  --ink: #1B2430;
  --muted: #6B7A90;
  --paper: #F6F7F9;
  --card: #FFFFFF;
  --line: #E1E6EE;
  --ok: #2E9E6B;
  --danger: #D64545;

  /* ---- Option colours (A–H) ---- */
  --opt-0: #2E86DE;
  --opt-1: #F39C12;
  --opt-2: #27AE60;
  --opt-3: #8E44AD;
  --opt-4: #E74C3C;
  --opt-5: #16A085;
  --opt-6: #D35400;
  --opt-7: #7F8C8D;

  --font: Candara, 'Segoe UI', 'Trebuchet MS', 'Gill Sans', 'Helvetica Neue', Arial, sans-serif;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(11, 37, 69, .12);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  line-height: 1.35;
}
h1, h2, h3 { font-weight: 700; margin: 0; letter-spacing: .01em; }
button, input, textarea, select { font-family: inherit; font-size: inherit; }
a { color: var(--navy-3); }

.logo { height: 44px; width: auto; color: #fff; display: block; }
.logo.dark { color: var(--navy); }

.chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.2em; height: 2.2em; border-radius: 50%;
  font-weight: 700; color: #fff; flex: 0 0 auto;
  background: var(--opt-0);
}
.c0 { background: var(--opt-0) } .c1 { background: var(--opt-1) } .c2 { background: var(--opt-2) } .c3 { background: var(--opt-3) }
.c4 { background: var(--opt-4) } .c5 { background: var(--opt-5) } .c6 { background: var(--opt-6) } .c7 { background: var(--opt-7) }

.btn {
  appearance: none; border: 0; cursor: pointer;
  background: var(--navy); color: #fff; font-weight: 700;
  padding: .7em 1.3em; border-radius: 10px;
  transition: transform .08s ease, background .15s ease, opacity .15s;
}
.btn:hover { background: var(--navy-3); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.gold { background: var(--gold); color: var(--navy); }
.btn.gold:hover { background: var(--gold-2); }
.btn.ghost { background: transparent; color: var(--navy); border: 2px solid var(--line); }
.btn.ghost:hover { background: #fff; border-color: var(--navy-3); }
.btn.danger { background: var(--danger); }

.muted { color: var(--muted); }
.hidden { display: none !important; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }
@keyframes pop { 0% { transform: scale(.92) } 60% { transform: scale(1.04) } 100% { transform: scale(1) } }
@keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: .45 } }
.fade-up { animation: fadeUp .5s ease both; }

/* Visually hidden (a11y) */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }