/**
 * Design tokens — the whole visual identity in one file.
 *
 * Every colour, size and spacing value the site uses is declared
 * here as a custom property. Change a value here and it changes
 * everywhere, consistently. Nothing else in the theme should contain
 * a raw hex colour or a hard-coded pixel size.
 *
 * THE TWO BRAND COLOURS ARE DENISE'S OWN, exactly as she gave them:
 *   Dark cocoa  #311B14
 *   Soft ivory  #EDE6D8
 *
 * She asked which way round they should go. This theme puts IVORY ON
 * THE BOTTOM and cocoa on the text, for two reasons: long reading
 * passages (Om mig, the election themes) are markedly easier on a
 * light ground, and an ivory page reads as open and approachable
 * rather than heavy — which is what you want from a candidate site.
 * The dark direction is not lost: .ek-band--dark flips the pair for
 * single full-width sections (the quote band, the footer), so the
 * cocoa still carries weight where it makes a statement.
 *
 * Contrast of the pair is 12.5:1 — comfortably past WCAG AAA (7:1),
 * in both directions. If you change either colour, re-check the
 * contrast before shipping; anything under 4.5:1 is unreadable for
 * some visitors and fails the accessibility expectations that apply
 * to public-facing sites.
 */

:root {
    /* ---- Brand colours ---------------------------------------- */
    --ek-cocoa: #311B14;
    --ek-ivory: #EDE6D8;

    /* Derived neutrals. NOT part of the brand — sampled from the two
       above so the palette stays closed and nothing foreign creeps
       in. Keep it that way: no greys, no blues. */
    --ek-ivory-lift: #F5F1E8;   /* card ground, one step lighter than the page */
    --ek-ivory-line: #DCD2BE;   /* hairlines and field borders */
    --ek-cocoa-soft: #6B5348;   /* secondary text — 5.6:1 on ivory, still AA */

    /* ---- Semantic roles --------------------------------------- */
    /* Use these in site.css, not the brand names above. A section
       that flips to dark redefines these. */
    --ek-bg: var(--ek-ivory);
    --ek-bg-raised: var(--ek-ivory-lift);
    --ek-fg: var(--ek-cocoa);
    --ek-fg-muted: var(--ek-cocoa-soft);
    --ek-line: var(--ek-ivory-line);

    /* Accent: the colour of buttons and highlights. Party identities
       have a third colour for this (Kokoomus blue, SDP red) that is
       not the text colour. This two-colour identity has none, so the
       accent IS the text colour and nothing on the page changes.
         --ek-accent       the surface: solid buttons, donate pill
         --ek-accent-ink   text on that surface
         --ek-accent-text  accent-coloured text on the page ground,
                           guaranteed >= 4.5:1 by the generator */
    --ek-accent: var(--ek-cocoa);
    --ek-accent-ink: var(--ek-ivory);
    --ek-accent-text: var(--ek-cocoa);

    /* The dark band's pair, reachable from the light ground too — a
       block the editor paints "kaista" needs it outside the band. */
    --ek-band-bg: var(--ek-cocoa);
    --ek-band-fg: var(--ek-ivory);

    /* ---- Type ------------------------------------------------- */
    --ek-font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --ek-font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Fluid sizes: clamp(min, preferred, max). The middle term is in
       vw units, so headings scale with the viewport instead of
       jumping at breakpoints.

       These were all one step larger to begin with — the hero maxed at
       6rem. On an ordinary 1440x900 laptop that produced a three-line
       headline that filled the entire first screen on its own, pushing
       the portrait and everything after it below the fold. A display
       face this heavy does not need 96px to read as a display face. */
    --ek-size-hero: clamp(2.5rem, 1.3rem + 3.4vw, 4.25rem);
    --ek-size-h1: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
    --ek-size-h2: clamp(1.6rem, 1.25rem + 1.5vw, 2.4rem);
    --ek-size-h3: clamp(1.25rem, 1.1rem + 0.8vw, 1.6rem);
    --ek-size-lead: clamp(1.0625rem, 1rem + 0.4vw, 1.3125rem);
    --ek-size-body: 1.0625rem;
    --ek-size-small: 0.9375rem;
    --ek-size-eyebrow: 0.8125rem;

    --ek-tracking-eyebrow: 0.18em;  /* small caps need air to stay readable */
    --ek-leading-tight: 1.08;       /* display headings */
    --ek-leading-body: 1.65;        /* reading text */

    /* ---- Spacing ---------------------------------------------- */
    --ek-space-1: 0.5rem;
    --ek-space-2: 1rem;
    --ek-space-3: 1.5rem;
    --ek-space-4: 2.5rem;
    --ek-space-5: 4rem;
    --ek-space-6: 6rem;
    /* Tightened from a 7.5rem maximum. With five sections on the front
       page, that much air between them meant no two sections were ever
       on screen together and the page read as a slideshow. */
    --ek-section-y: clamp(2.75rem, 1.5rem + 3.6vw, 5rem);

    /* ---- Measure and gutters ---------------------------------- */
    --ek-max-page: 1160px;
    --ek-max-text: 62ch;     /* comfortable line length for reading */
    --ek-max-narrow: 760px;
    --ek-gutter: clamp(1.25rem, 4vw, 3rem);

    /* ---- Shapes ------------------------------------------------ */
    /* The arch. Denise asked for arched and round images — this is
       the arch: fully rounded top corners, square bottom. Expressed
       as an elliptical radius so the curve stays a true half-dome
       whatever the image aspect ratio happens to be. */
    --ek-arch: 50% 50% 0 0 / 42% 42% 0 0;
    --ek-round: 50%;
    --ek-radius-card: 6px;
    --ek-radius-pill: 999px;

    /* ---- Motion ------------------------------------------------ */
    --ek-transition: 180ms ease;
}

/* Dark band. Applied to a section to flip the whole palette for that
   strip — cocoa ground, ivory text. Everything inside inherits it,
   because the components in site.css reference the semantic roles
   above rather than the brand names. */
.ek-band--dark {
    --ek-bg: var(--ek-cocoa);
    --ek-bg-raised: #3E241B;
    --ek-fg: var(--ek-ivory);
    --ek-fg-muted: #C9BCA6;
    --ek-line: #5A4034;
    /* The accent flips with the band: a cocoa button on a cocoa
       ground would vanish. */
    --ek-accent: var(--ek-ivory);
    --ek-accent-ink: var(--ek-cocoa);
    --ek-accent-text: var(--ek-ivory);

    background: var(--ek-bg);
    color: var(--ek-fg);
}