:root{
/* Surfaces */
--surface-page:var(--neutral-0);
--surface-subtle:var(--blue-50);
--surface-card:var(--neutral-0);
--surface-sunken:var(--neutral-50);
--surface-brand:var(--blue-900);
/* Kein "deep" mehr — Blau ist das dunkelste Blau. Dunkle Bänder = --surface-brand. */
/* Minze ist Akzent, nie Fläche: --surface-accent nur für kleine Elemente AUF blauem Grund
   (Badge, Button onBrand, Linien, Pfeile). Nie als Sektions-, Karten- oder Seitenfläche,
   nie auf Weiß — dort trägt Minze nicht. Flächenverhältnis 60 Weiß / 30 Blau / 10 Minze. */
--surface-accent:var(--mint-500);
--surface-accent-soft:var(--mint-100);
--surface-overlay:rgba(46,73,153,.62);

/* Text */
--text-body:var(--neutral-900);
--text-muted:var(--neutral-500);
--text-heading:var(--blue-900);
--text-brand:var(--blue-900);
--text-accent:var(--mint-800);
--text-on-brand:var(--neutral-0);
--text-on-brand-accent:var(--mint-500);
--text-on-accent:var(--blue-900);
--text-link:var(--blue-900);
--text-link-hover:var(--blue-700);
--text-disabled:var(--neutral-400);

/* Controls */
--control-primary-bg:var(--blue-900);
--control-primary-bg-hover:var(--blue-800); /* heller, nie dunkler */
--control-primary-bg-active:var(--blue-700);
--control-primary-fg:var(--neutral-0);
--control-accent-bg:var(--mint-500);
--control-accent-bg-hover:var(--mint-600);
--control-accent-bg-active:var(--mint-700);
--control-accent-fg:var(--blue-900);
--control-secondary-fg:var(--blue-900);
--control-secondary-border:var(--blue-300);
--control-secondary-bg-hover:var(--blue-50);
--control-ghost-bg-hover:var(--blue-50);
--control-disabled-bg:var(--neutral-100);
--control-disabled-fg:var(--neutral-400);
--control-h-sm:34px; /* @kind spacing */
--control-h-md:42px; /* @kind spacing */
--control-h-lg:52px; /* @kind spacing */

/* Fields */
--field-bg:var(--neutral-0);
--field-border:var(--neutral-300);
--field-border-hover:var(--neutral-400);
--field-border-focus:var(--blue-900);
--field-placeholder:var(--neutral-400);

/* Header / nav */
--nav-h:76px; /* @kind spacing */
}