/**
 * Koralli ja yönsininen — design tokens
 *
 * GENEROITU TIEDOSTO. Älä muokkaa käsin: muutos tehdään ilme.json-tiedostoon
 * ja ajetaan tyokalut/generoi.py.
 * Lähde: Tero Koskisen oma Canva-ilme: kahdeksan Instagram-pohjaa ("Instagram Headline Post Change Starts Here"), joista arkki 6 on ilmeohjeisto (värit + fontit) ja arkit 7–8 logoarkkeja. Tero lähetti ne sähköpostilla, kun tilauslomakkeen tiedostolataus epäonnistui; Santeri toi kansioon tilaus/ilme/ 21.9.2026.
 * Generoitu 2026-09-21.
 *
 * Kontrastit:
 *   teksti / pohja                           14.39:1  (#142234 / #F9F2E2)
 *   tumma kaista                             14.39:1  (#F9F2E2 / #142234)
 *   teksti brandin päällä (painikkeet)        5.38:1  (#142234 / #F46775)
 *   brandi tekstinä pohjalla (linkit)         2.67:1  (#F46775 / #F9F2E2)
 *   linkki tekstinä pohjalla                  4.73:1  (#B04B55 / #F9F2E2)
 *   toissijainen teksti / pohja               5.71:1  (#596068 / #F9F2E2)
 *   toissijainen teksti / tumma kaista        8.62:1  (#C0BEB6 / #142234)
 *   yläpalkki: teksti / pohja                14.39:1  (#F9F2E2 / #142234)
 * HUOM: brandi tekstinä pohjalla (linkit): 2.67:1 (#F46775 / #F9F2E2), raja 4.5
 * HUOM: brandi ei kelpaa tekstiväriksi pohjalla; --ek-accent-text = tumman kaistan pohja #142234
 */

:root {
    /* ---- Puolueen viralliset värit ---------------------------- */
    --ek-brand-kerma: #F9F2E2;   /* pohja */
    --ek-brand-yonsininen: #142234;   /* teksti */
    --ek-brand-koralli: #F46775;   /* brandi */
    --ek-brand-koralli-tumma: #B04B55;   /* linkki */
    --ek-brand-petroli: #204052;   /* ohjeiston kolmas tumma sävy (#204052); sitaatin antiikvateksti ja kuvien päällysteet */
    --ek-brand-videon-tausta: #0E1823;   /* ohjeiston #0e1823, varattu videotaustoille — ei käytössä sivustolla */

    /* ---- Johdetut sävyt (eivät ohjeistosta, laskettu) ---------- */
    --ek-bg-lift: #F0EADB;
    --ek-bg-line: #D0CDC3;
    --ek-fg-soft: #596068;

    /* ---- Semanttiset roolit (site.css käyttää näitä) ----------- */
    --ek-bg: #F9F2E2;
    --ek-bg-raised: var(--ek-bg-lift);
    --ek-fg: #142234;
    --ek-fg-muted: var(--ek-fg-soft);
    --ek-line: var(--ek-bg-line);
    --ek-accent: #F46775;        /* painikkeet, korostuspinnat */
    --ek-accent-ink: #142234;    /* teksti accent-pinnan päällä */
    --ek-accent-text: #B04B55;   /* accent-värinen teksti pohjalla, kontrasti tarkistettu */
    --ek-band-bg: #142234;       /* tumman kaistan pari myös vaalealta pohjalta käsin */
    --ek-band-fg: #F9F2E2;

    /* ---- Logon korkeus ylä- ja alatunnisteessa ---------------- */
    --ek-partylogo-h: 34px;
    --ek-footer-logo-h: 46px;

    /* ---- Fontit ----------------------------------------------- */
    --ek-font-display: 'Garet', 'Outfit', Garet, 'Century Gothic', 'Segoe UI', Roboto, sans-serif;
    --ek-font-body: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

    /* ---- Koot, välit, muodot: teeman oletukset ------------------ */
    --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;
    --ek-leading-tight: 1.08;
    --ek-leading-body: 1.65;

    --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;
    --ek-section-y: clamp(2.75rem, 1.5rem + 3.6vw, 5rem);

    --ek-max-page: 1160px;
    --ek-max-text: 62ch;
    --ek-max-narrow: 760px;
    --ek-gutter: clamp(1.25rem, 4vw, 3rem);

    --ek-arch: 50% 50% 0 0 / 42% 42% 0 0;
    --ek-round: 50%;
    --ek-radius-card: 6px;
    --ek-radius-pill: 999px;

    --ek-transition: 180ms ease;
}

/* Tumma kaista: sitaattipalkki, alatunniste. */
.ek-band--dark {
    --ek-bg: #142234;
    --ek-bg-raised: #263342;
    --ek-fg: #F9F2E2;
    --ek-fg-muted: #C0BEB6;
    --ek-line: #4D5660;
    --ek-accent: #F46775;
    --ek-accent-ink: #142234;
    --ek-accent-text: #F46775;

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

/* Yläpalkki omalla värityksellä (Yönsininen). */
.ek-header {
    --ek-bg: #142234;
    --ek-bg-raised: #222E3E;
    --ek-fg: #F9F2E2;
    --ek-fg-muted: #C0BEB6;
    --ek-line: #4D5660;
    --ek-accent: #F46775;
    --ek-accent-ink: #142234;
    --ek-accent-text: #F46775;
}