/**
 * 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: .dk-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 ---------------------------------------- */
    --dk-cocoa: #311B14;
    --dk-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. */
    --dk-ivory-lift: #F5F1E8;   /* card ground, one step lighter than the page */
    --dk-ivory-line: #DCD2BE;   /* hairlines and field borders */
    --dk-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 only these five. */
    --dk-bg: var(--dk-ivory);
    --dk-bg-raised: var(--dk-ivory-lift);
    --dk-fg: var(--dk-cocoa);
    --dk-fg-muted: var(--dk-cocoa-soft);
    --dk-line: var(--dk-ivory-line);

    /* ---- Type ------------------------------------------------- */
    --dk-font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --dk-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. */
    --dk-size-hero: clamp(2.5rem, 1.3rem + 3.4vw, 4.25rem);
    --dk-size-h1: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
    --dk-size-h2: clamp(1.6rem, 1.25rem + 1.5vw, 2.4rem);
    --dk-size-h3: clamp(1.25rem, 1.1rem + 0.8vw, 1.6rem);
    --dk-size-lead: clamp(1.0625rem, 1rem + 0.4vw, 1.3125rem);
    --dk-size-body: 1.0625rem;
    --dk-size-small: 0.9375rem;
    --dk-size-eyebrow: 0.8125rem;

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

    /* ---- Spacing ---------------------------------------------- */
    --dk-space-1: 0.5rem;
    --dk-space-2: 1rem;
    --dk-space-3: 1.5rem;
    --dk-space-4: 2.5rem;
    --dk-space-5: 4rem;
    --dk-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. */
    --dk-section-y: clamp(2.75rem, 1.5rem + 3.6vw, 5rem);

    /* ---- Measure and gutters ---------------------------------- */
    --dk-max-page: 1160px;
    --dk-max-text: 62ch;     /* comfortable line length for reading */
    --dk-max-narrow: 760px;
    --dk-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. */
    --dk-arch: 50% 50% 0 0 / 42% 42% 0 0;
    --dk-round: 50%;
    --dk-radius-card: 6px;
    --dk-radius-pill: 999px;

    /* ---- Motion ------------------------------------------------ */
    --dk-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. */
.dk-band--dark {
    --dk-bg: var(--dk-cocoa);
    --dk-bg-raised: #3E241B;
    --dk-fg: var(--dk-ivory);
    --dk-fg-muted: #C9BCA6;
    --dk-line: #5A4034;

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