/* =====================================================================
 * 7WFC — Design tokens
 *
 * THIS IS THE CAMPAIGN PALETTE. It replaces the values currently in the
 * Master Brief and the Designer Brief, which diverge from the brand guide
 * and from each other, and it replaces any palette present in existing
 * plugin code or theme styles.
 *
 * Source: SKILL.md brand guide v1.0.0 — the only document in the project
 * that is normative on colour. The other two are extractions from an
 * earlier site state and are superseded.
 *
 * Every colour in the delivered CSS resolves through a variable below.
 * Do not hardcode colour values in plugin templates, inline styles or
 * JavaScript. Anything that needs a colour reads a token from this file.
 *
 * Practical consequence, stated so it is not discovered later: this is a
 * light palette. The current live site is dark navy with teal and cyan.
 * The voting page will not look like the current site, and that is the
 * intended outcome, not a mismatch to be corrected during integration.
 * ===================================================================== */

:root {

  /* --- Primary ---------------------------------------------------- */

  --wfc-primary:        #004AAD;   /* CTAs, buttons, links, key UI */
  --wfc-accent:         #3D7BFF;   /* hover states, highlights, icons */
  --wfc-ink:            #1E1E26;   /* body copy, headings on light */

  /* --- Secondary -------------------------------------------------- */

  --wfc-primary-alt:    #E6F0FF;   /* backgrounds, cards, highlight zones */
  --wfc-primary-dark:   #2B3A67;   /* dark headings, footer accents */
  --wfc-border-dark:    #2F3545;   /* footer, dark section backgrounds */

  /* --- Surfaces --------------------------------------------------- */

  --wfc-base:           #FFFFFF;   /* primary page background */
  --wfc-secondary:      #F5F7FA;   /* alternating section background */
  --wfc-tertiary:       #F0F4FF;   /* card backgrounds, phase panels */
  --wfc-border:         #E2E6EC;   /* dividers, card borders */

  /* --- Campaign phase accents ------------------------------------- */
  /* Green carries every selection indicator in the voting interface.
   * This is a deliberate reuse of the Phase 1 accent, approved with the
   * reference build. Do not substitute the primary blue: blue is the
   * action colour, green is the confirmed-state colour, and the grid
   * relies on that distinction being readable at a glance. */

  --wfc-green:          #4BA556;   /* selection, confirmed, success */
  --wfc-yellow:         #F5C342;   /* Phase 2 accent */
  --wfc-steel:          #8CA6D1;   /* Phase 3 accent */

  /* --- Functional ------------------------------------------------- */
  /* Derived, not from the brand guide, which defines no error colour.
   * Chosen to pass WCAG AA on white and to sit apart from the green. */

  --wfc-error:          #B3261E;
  --wfc-error-bg:       #FCEEED;
  --wfc-muted:          #6B6F7A;   /* secondary text, AA on white */
  --wfc-disabled:       #A8ADB8;

  /* --- Typography -------------------------------------------------- */

  --wfc-font: 'Be Vietnam Pro', 'IBM Plex Sans Arabic', ui-sans-serif, system-ui, sans-serif;

  --wfc-weight-body:    400;
  --wfc-weight-strong:  600;

  --wfc-size-display:   52px;
  --wfc-size-h2:        33px;
  --wfc-size-h3:        22px;
  --wfc-size-body:      15.5px;
  --wfc-size-small:     13.5px;

  --wfc-line-body:      1.55;

  /* Arabic overrides. Applied by fonts-ar.css under [dir="rtl"].
   * Arabic needs more leading than Latin: the script sits on a lower
   * baseline, has deeper descenders, and carries diacritics above the
   * line. At 1.55 the marks collide with the line above. */
  --wfc-line-body-ar:   1.85;
  --wfc-size-body-ar:   16.5px;

  /* --- Geometry ---------------------------------------------------- */

  --wfc-radius:         5px;
  --wfc-radius-card:    8px;
  --wfc-gutter:         16px;
  --wfc-header-h:       64px;

  /* --- Motion ------------------------------------------------------ */
  /* Kept short. The grid holds 260 cards; long transitions on a list
   * that size read as lag, not polish. */

  --wfc-transition:     140ms ease-out;
}

/* Contrast, verified against the brand guide requirement of WCAG AA:
 *   #004AAD on #FFFFFF   — 8.59:1   passes AA and AAA
 *   #1E1E26 on #FFFFFF   — 15.8:1   passes AAA
 *   #6B6F7A on #FFFFFF   — 4.85:1   passes AA for body text
 *   #FFFFFF on #4BA556   — 3.24:1   passes AA for large text and icons only,
 *                                   not for body copy. The green is used for
 *                                   the voted-state circle with a white
 *                                   checkmark, which is a graphical object
 *                                   under 1.4.11 and needs 3:1. It passes.
 *                                   Do not set body copy in white on green.
 */