:root{
/* --- base palette (brand-confirmed) --- */
--kp-sky:#5eaacc;          /* the exact top row of magnolia.jpg — the two must match, or
                              the iOS status-bar band shows as a seam against the sky */
--kp-sky-deep:#3f8fb4;
--kp-sky-soft:#9ccbe1;
--kp-cream:#fffcf4;        /* brand light — paper / long-form reading surface */
--kp-cream-2:#f7f1e4;
--kp-mint:#eff4f1;         /* the pale panel used for the player card */
--kp-mint-90:rgba(239,244,241,.9);  /* the same panel at 90%, so the photo reads through */
--kp-ink:#231c17;          /* brand dark — body copy and the live band */
--kp-ink-70:rgba(35,28,23,.7);
--kp-ink-40:rgba(35,28,23,.4);
--kp-ink-12:rgba(35,28,23,.12);
--kp-ink-06:rgba(35,28,23,.06);
--kp-ink-05:rgba(35,28,23,.05);
--kp-white:#ffffff;
--kp-white-70:rgba(255,255,255,.7);
--kp-white-50:rgba(255,255,255,.5);
--kp-white-40:rgba(255,255,255,.4);
--kp-white-12:rgba(255,255,255,.12);
--kp-white-05:rgba(255,255,255,.05);
--kp-magnolia:#c25a78;     /* petal pink, pulled from the photo */
--kp-magnolia-deep:#a64b74;
--kp-blossom:#f2c7ce;

/* --- semantic aliases ---
   Components read from here, never from the palette above. Retinting the brand
   is a change to this block; the palette itself only ever gains new values. */
--surface-page:var(--kp-cream);
--surface-sky:var(--kp-sky);
--surface-panel:var(--kp-mint);
--surface-panel-90:var(--kp-mint-90);
--surface-dark:var(--kp-ink);
--surface-footer:var(--kp-ink);   /* same dark as the live band — two
                                     near-blacks one band apart read as a
                                     mistake, not as a decision */
--surface-card:var(--kp-white);

/* interaction tints — flat washes, no shadows (see effects.css) */
--state-hover-ink:var(--kp-ink-05);
--state-current-ink:var(--kp-ink-06);
--state-hover-on-dark:var(--kp-white-05);

--text-body:var(--kp-ink);
--text-muted:var(--kp-ink-70);
--text-on-dark:var(--kp-cream);
--text-on-dark-muted:var(--kp-white-70);
/* 50%, not 40%: at 40% this lands on 3.79:1 against --kp-ink and the labels that
   use it ("Ausverkauft", "Gespielt") are 10-11px. 50% reaches 5.16:1. */
--text-on-dark-faint:var(--kp-white-50);
--text-on-sky:var(--kp-white);
--text-accent:var(--kp-magnolia-deep);

--line-ink:var(--kp-ink);
--line-hairline:var(--kp-ink-12);
--line-on-dark:var(--kp-white);
--line-on-dark-soft:var(--kp-white-12);

--control-accent:var(--kp-ink);   /* native checkbox / radio tick */

/* The focus ring is two rings, not one. Magnolia alone carries cream, mint, ink
   and black, but it sits at almost exactly the sky's luminance (1.61:1 there, and
   worse once the sky band is scrimmed), so on the follow icons it would vanish.
   The cream halo covers precisely the surfaces magnolia cannot: on every surface
   on this page at least one of the two rings clears 3:1. */
--focus-ring:var(--kp-magnolia);
--focus-ring-halo:var(--kp-cream);
}