/* ==========================================================================
   Eleições — design tokens

   Mirrors the token catalogue in the Penpot file "ELEICOES" (set `core` plus
   the `party/*` sets). Two tiers, same rule as the L-Bar: `--c-*` primitives
   carry the raw value, semantic vars point at them, component CSS only ever
   names the semantic one.

   Every number here was measured off the approved 1920x1080 PNGs in `refs/`,
   not eyeballed. Where a value looks odd (a 3px rule, a 294px chip) it is odd
   in the artwork too.
   ========================================================================== */

:root {
  /* --- primitives: party ----------------------------------------------- */
  --c-blue:        #102E8F;
  --c-blue-tint:   #4C62AB;
  --c-blue-wash:   #8897C7;   /* emblem inside the blue field */
  --c-blue-shade:  #0E2779;   /* x0.85 — the sunk half of a check box */
  --c-blue-deep:   #081645;

  --c-red:         #DC1525;
  --c-red-tint:    #E5505C;
  --c-red-wash:    #EE8A92;
  --c-red-shade:   #BB121F;
  --c-red-deep:    #6E0B13;

  --c-slate:       #464646;
  --c-slate-shade: #3B3B3B;

  /* --- primitives: ground ---------------------------------------------- */
  --c-neutral:      #D2D2D2;
  --c-neutral-hi:   #E2E2E2;
  --c-neutral-lo:   #5E5E5E;
  --c-white:        #FFFFFF;
  --c-black:        #000000;
  --c-ink:          #434652;   /* given name on the neutral field */
  --c-ink-deep:     #00081A;   /* Race - Map header, INCUMBENT chip */
  --c-muted:        #8C8C8C;   /* placeholder fill for photo + map slots */

  /* --- primitives: accent ---------------------------------------------- */
  --c-data:         #F0D233;   /* the 2024 ELECTION DATA chip */
  --c-data-shade:   #D2B51E;
  --c-divider:      #FFE000;   /* the chamber divider in Balance of Power */

  /* --- frame ------------------------------------------------------------ */
  --stage-w: 1920;
  --stage-h: 1080;

  /* Motion is counted in FRAMES, not milliseconds, the same way the L-Bar
     counts it: one value takes the whole package from 25p to 50p. */
  --motion-frame: 40ms;
  --hemi-dur: calc(var(--motion-frame) * 45);

  /* --- type -------------------------------------------------------------
     ABU DHABI MEDIA — the licensed family for this package. Two numbers
     describe a family here, and swapping font means changing only these:
       --el-cap        cap height as a fraction of the em
       --el-cap-shift  where `line-height: 1` puts the cap top, in em
     Both were read out of the TTF: sCapHeight 0.686, hhea 1.050/0.460 with
     USE_TYPO_METRICS off, which lands the cap top 0.109em down.

     Every size in this package is a CAP HEIGHT in pixels, because that is what
     you can measure off a rendered frame. `font-size` is derived from it.

     The family has no heavy cut, so display lines the artwork set in a black
     weight come out in Bold. See css/fonts.css.
     ---------------------------------------------------------------------- */
  --el-font: "Abu Dhabi Media", "Helvetica Neue LT Pro", "Arial Narrow",
             Helvetica, Arial, sans-serif;
  --el-cap: 0.686;
  --el-cap-shift: 0.109em;
  /* Manual trim, on top of the family metrics, for the day a substitute is
     close but not exact. The diff harness writes it. */
  --el-cap-nudge: 0px;

  /* --- the ground gradient --------------------------------------------- */
  /* Sampled down a clean column of MAPS.png: it is not linear, it accelerates,
     so it needs the middle stops to sit where they were measured. */
  --el-ground: linear-gradient(
    to bottom,
    #D2D2D2 0%,
    #C9C9C9 25%,
    #B2B2B2 45%,
    #929292 64%,
    #5E5E5E 100%
  );

  /* --- semantic --------------------------------------------------------- */
  --el-field-dem: var(--c-blue);
  --el-field-rep: var(--c-red);
  --el-field-oth: var(--c-slate);
  --el-on-field:  var(--c-white);
  --el-on-ground: var(--c-black);
}

/* Party is an attribute on the template element, not a theme: two candidates
   of different parties share one frame, so a global swap cannot express it. */
/* `--el-party-rgb` exists because the photo fade needs the party colour at
   partial alpha and `color-mix()` is not safe on the Chromium a playout box
   ships. Channels, then `rgba(var(--el-party-rgb), .22)`. */
[data-party="dem"] {
  --el-party:        var(--c-blue);
  --el-party-rgb:    16, 46, 143;
  --el-party-shade:  var(--c-blue-shade);
  --el-party-wash:   var(--c-blue-wash);
  --el-party-deep:   var(--c-blue-deep);
}
[data-party="rep"] {
  --el-party:        var(--c-red);
  --el-party-rgb:    220, 21, 37;
  --el-party-shade:  var(--c-red-shade);
  --el-party-wash:   var(--c-red-wash);
  --el-party-deep:   var(--c-red-deep);
}
[data-party="other"] {
  --el-party:        var(--c-slate);
  --el-party-rgb:    70, 70, 70;
  --el-party-shade:  var(--c-slate-shade);
  --el-party-wash:   #8C8C8C;
  --el-party-deep:   #202020;
}

/* The packaged fallback. Its ascent equals its cap height and ascent+descent
   is exactly 1em, so `line-height: 1` lands the cap top on the box top and the
   shift is zero — which is why the Penpot file could use the same numbers. */
[data-type="condensed"] {
  --el-font: "Helvetica Neue LT Pro", "Arial Narrow", Helvetica, Arial, sans-serif;
  --el-cap: 0.714;
  --el-cap-shift: 0em;
}