:root{
/* Base palette — the complete Wilhelmshof palette. Nothing outside this list. */
--wh-deep-petrol:#0c2a2e;
--wh-petrol:#12545c;
--wh-lime-chalk:#f6f5f2;
--wh-leinen:#edeae2;
--wh-paper:#ffffff;
--wh-black:#111111;

/* Hairlines & veils — derived only by transparency of palette colours */
--wh-deep-petrol-12:rgba(12,42,46,.12);
--wh-deep-petrol-20:rgba(12,42,46,.20);
--wh-deep-petrol-08:rgba(12,42,46,.08);
--wh-paper-16:rgba(255,255,255,.16);
--wh-paper-70:rgba(255,255,255,.70);

/* Semantic — surfaces */
--surface-page:var(--wh-lime-chalk);
--surface-card:var(--wh-paper);
--surface-sunken:var(--wh-leinen);
--surface-inverse:var(--wh-deep-petrol);
--surface-accent:var(--wh-petrol);

/* Semantic — ink */
--text-heading:var(--wh-deep-petrol);
--text-body:var(--wh-black);
--text-muted:var(--wh-petrol);
--text-on-inverse:var(--wh-lime-chalk);
--text-on-accent:var(--wh-paper);

/* Semantic — lines */
--line-hairline:var(--wh-deep-petrol-12);
--line-strong:var(--wh-deep-petrol);
--line-on-inverse:var(--wh-paper-16);

/* Semantic — interactive */
--action-primary-bg:var(--wh-deep-petrol);
--action-primary-fg:var(--wh-lime-chalk);
--action-primary-bg-hover:var(--wh-petrol);
--action-secondary-fg:var(--wh-deep-petrol);
--focus-ring:var(--wh-petrol);
}