:root{
/* Base palette — the three approved brand colours plus white. No additional layout colours. */
--nmc-rot:#CC0000;
--nmc-petrol:#006666;
--nmc-grau:#333333;
--nmc-weiss:#FFFFFF;

/* Derived steps. Tints/shades of the three colours only — used for hover, press,
   quiet surfaces and hairlines. Never introduce a new hue. */
--rot-700:#A30000;
--rot-600:#B80000;
--rot-500:#CC0000;
--rot-100:#F7DBDB;
--rot-050:#FCF0F0;

--petrol-800:#004747;
--petrol-700:#005555;
--petrol-600:#006666;
--petrol-100:#D6E5E5;
--petrol-050:#EFF5F5;

--grau-900:#1A1A1A;
--grau-800:#333333;
--grau-600:#5C5C5C;
--grau-400:#8A8A8A;
--grau-200:#CFCFCF;
--grau-100:#E6E6E6;
--grau-050:#F4F4F4;

/* Semantic aliases — always prefer these in components. */
--text-body:var(--grau-800);
--text-strong:var(--grau-900);
--text-muted:var(--grau-600);
--text-quiet:var(--grau-400);
--text-accent:var(--nmc-rot);
--text-structure:var(--nmc-petrol);
--text-inverse:var(--nmc-weiss);
--text-link:var(--nmc-petrol);
--text-link-hover:var(--nmc-rot);

--surface-page:var(--nmc-weiss);
--surface-card:var(--nmc-weiss);
--surface-quiet:var(--grau-050);
--surface-petrol:var(--nmc-petrol);
--surface-petrol-quiet:var(--petrol-050);
--surface-rot:var(--nmc-rot);
--surface-rot-quiet:var(--rot-050);
--surface-dark:var(--grau-900);

--border-hairline:var(--grau-200);
--border-strong:var(--grau-800);
--border-frame:var(--nmc-rot);
--border-structure:var(--nmc-petrol);
--border-focus:var(--nmc-petrol);

/* Interaction */
--action-primary-bg:var(--nmc-rot);
--action-primary-bg-hover:var(--rot-700);
--action-primary-fg:var(--nmc-weiss);
--action-secondary-bg:var(--nmc-petrol);
--action-secondary-bg-hover:var(--petrol-800);
--action-secondary-fg:var(--nmc-weiss);
--action-ghost-fg:var(--nmc-petrol);
--action-ghost-fg-hover:var(--nmc-rot);
--action-disabled-bg:var(--grau-100);
--action-disabled-fg:var(--grau-400);
}