/*
 * Theme tokens, ported from Van der Vault's "Emerald Ledger" dark theme
 * (van-der-vault/src/index.css). Plain CSS variables: this project has no
 * build step, so there is no Tailwind @theme block.
 *
 * Rule of thumb: the emerald palette is the chrome (surfaces, borders, text,
 * the "live" pulse). Party colours carry the data. Keep jade out of the data,
 * because it sits close to the Green and TOP colours.
 */

/* Fonts: same three families as Van der Vault. If the internet is down the
   feed is down too, so loading from Google Fonts costs nothing extra. */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Instrument+Sans:wght@400..700&family=Spline+Sans+Mono:wght@300..700&display=swap');

:root {
  color-scheme: dark;

  /* Surfaces, darkest to lightest */
  --abyss: #0a100e;    /* page background */
  --surface: #0e1713;  /* cards, header */
  --raised: #121d17;   /* hover, inputs, nested blocks */
  --overlay: #17251d;  /* popovers, pressed states */

  /* Borders */
  --edge: #1e3028;
  --edge-bright: #2c4638;

  /* Text */
  --bright: #e9f7f0;   /* headings, primary numbers */
  --dim: #7fa894;      /* labels, secondary text */
  --faint: #6e9682;    /* metadata; keep >= 4.5:1 on surface */

  /* Accent: chrome only (live dot, focus rings, the majority line glow) */
  --accent: #3de8a0;
  --accent-bright: #b8f5dc;
  --accent-deep: #1e5c46;

  /* Status. In VDV, jade/red mean credit/debit. Here they don't: */
  --flag: #e86a6a;     /* cross-check mismatch, stale feed, errors */
  --attn: #b8f5dc;     /* tossups, overrides, "changed hands" */

  /* Glows and shadows */
  --glow-sm: 0 0 12px rgba(61, 232, 160, 0.25);
  --glow: 0 0 24px rgba(61, 232, 160, 0.32);
  --glow-flag: 0 0 16px rgba(232, 106, 106, 0.25);
  --glow-attn: 0 0 16px rgba(184, 245, 220, 0.25);
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.35);

  /* Type: Bricolage for titles and TV hero numbers, Instrument Sans for UI,
     Spline Sans Mono (tabular) for every count, percentage and seat number. */
  --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
  --font-display: 'Bricolage Grotesque', 'Instrument Sans', ui-sans-serif, sans-serif;
  --font-mono: 'Spline Sans Mono', ui-monospace, 'SF Mono', monospace;

  /*
   * Party colours. --p-* is the fill (seat bar, chips). --p-*-text is a
   * lighter variant for text on the dark surface where the fill is too dark.
   * DRAFT: check these against each party's current branding and check
   * adjacent pairs in the seat bar for colour-blind separation before the
   * dry run.
   */
  --p-nat: #00529f;  --p-nat-text: #5f9de0;
  --p-lab: #d82a20;  --p-lab-text: #f0675f;
  --p-gp:  #098137;  --p-gp-text:  #4cbf6e;
  --p-act: #fde401;  --p-act-text: #fde401;
  --p-nzf: #8a9299;  --p-nzf-text: #b9c0c6; /* NZ First's black is invisible here; grey stand-in */
  --p-tpm: #a3123a;  --p-tpm-text: #ff86a6; /* crimson, pinker than Labour; fills get black stripes */
  --p-tpm-fill: repeating-linear-gradient(135deg, #c8163f 0 5px, #000 5px 8px);
  --p-top: #32dac3;  --p-top-text: #32dac3; /* sits close to jade; never put jade beside it */
  --p-tttp: #c9772b; --p-tttp-text: #e39a55; /* placeholder: confirm the party's colour */
  --p-ind: #a58fd6;  --p-ind-text: #c2b1ea;  /* independents (Ferris) */
  --p-other: #4a5c53; --p-other-text: #7fa894;
}

html {
  background-color: var(--abyss);
  -webkit-tap-highlight-color: transparent;
}

/* Same app shell as VDV: deep ink-green with faint glows top and bottom. */
body {
  margin: 0;
  background-color: var(--abyss);
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(30, 92, 70, 0.22), transparent),
    radial-gradient(ellipse 60% 40% at 100% 110%, rgba(61, 232, 160, 0.05), transparent);
  background-attachment: fixed;
  color: var(--bright);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Card: VDV's ledger-sheet gradient. */
.card {
  border: 1px solid var(--edge);
  border-radius: 12px;
  background: linear-gradient(to bottom, var(--raised), var(--surface));
  box-shadow: var(--shadow-card);
}

/* Gradient accent top border, as on VDV hero cards. */
.gradient-accent { position: relative; overflow: hidden; }
.gradient-accent::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, #1e5c46, #2fa173, #3de8a0);
}

/* Numbers */
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.display { font-family: var(--font-display); font-weight: 600; }
.text-glow { text-shadow: 0 0 20px rgba(61, 232, 160, 0.4); }

/* Translucent status tints, VDV Badge pattern. */
.tint-attn { background: rgba(184, 245, 220, 0.1); color: var(--attn); box-shadow: inset 0 0 0 1px rgba(184, 245, 220, 0.25); }
.tint-flag { background: rgba(232, 106, 106, 0.1); color: var(--flag); box-shadow: inset 0 0 0 1px rgba(232, 106, 106, 0.25); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Entrance and "changed" flash, VDV keyframes. */
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes rowFlash { from { background-color: rgba(184, 245, 220, 0.14); } to { background-color: transparent; } }
.animate-fade-in { animation: fadeIn 0.3s ease-out both; }
.animate-row-flash { animation: rowFlash 1.2s ease-out; }

@media (prefers-reduced-motion: reduce) {
  .animate-fade-in, .animate-row-flash { animation-duration: 0.01ms !important; }
}