/* --------------------------------------------------------------------------
   SELF-HOSTED WEBFONT (no Google Fonts: POPIA section 72)
   One family for the whole site: Roboto.
   -------------------------------------------------------------------------- */
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/roboto-latin-300-normal.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/roboto-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/roboto-latin-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/roboto-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/roboto-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 900; font-display: swap; src: url('../fonts/roboto-latin-900-normal.woff2') format('woff2'); }

/* ==========================================================================
   GAZA DEMOCRATIC FRONT - 01 TOKENS

   Colour has one job each (Ideological Declaration, section 17):
     black  dominant: identity, structure, text
     red    the election: vote, countdown, registration, links
     gold   the join action, and emphasis on black
     green  Opportunity Ground only (its own brand), plus the flag line
   Corners are square (2px on controls) like print. Elevation only for
   things that float: the dropdown menu and the mobile panel.
   ========================================================================== */
:root {
  --gdf-black:      #000000;
  --gdf-night:      #121210;   /* header and dark sections */
  --gdf-charcoal:   #1a1916;
  --gdf-ink:        #1c1b19;
  --gdf-coal:       #2a2926;
  --gdf-gold:       #d4ad45;
  --gdf-gold-light: #ecd28b;
  --gdf-gold-line:  rgba(212, 173, 69, .35);
  --gdf-gold-dark:  #8a6a14;   /* gold text on white: 4.9:1 */
  --gdf-green:      #1f7a34;
  --gdf-green-deep: #13501f;
  --gdf-red:        #c60712;
  --gdf-red-dark:   #9b0510;

  --gdf-paper:      #ffffff;
  --gdf-paper-alt:  #f4f2ec;
  --gdf-rule:       #d9d5ca;
  --gdf-rule-dark:  #3a3934;
  --gdf-text:       #1c1b19;
  --gdf-muted:      #5b5850;
  --gdf-on-dark:    #d6d2c8;

  --gdf-font: 'Roboto', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --gdf-head: var(--gdf-font);
  --gdf-body: var(--gdf-font);
  --gdf-ui:   var(--gdf-font);

  /* Type scale */
  --gdf-display: clamp(2.6rem, 1.4rem + 4.6vw, 5.4rem);
  --gdf-t1: clamp(2.2rem, 1.5rem + 2.8vw, 3.8rem);
  --gdf-t2: clamp(1.75rem, 1.3rem + 1.7vw, 2.75rem);
  --gdf-t3: 1.2rem;
  --gdf-tb: 1.0625rem;
  --gdf-ts: .875rem;

  /* Spacing scale */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 72px; --s9: 96px;

  --gdf-max: 1240px;
  --gdf-text-max: 68ch;
  --gdf-gutter: clamp(16px, 4vw, 32px);
  --gdf-radius: 2px;
}