:root {
  /* Text */
  --color.text-primary: rgb(var(--fg.rgb));
  --color.text-muted: rgba(var(--fg.rgb) / .7);
  --color.text-on-action: rgb(255 255 255);

  /* Flächen */
  --color.surface: rgb(var(--surface.rgb));
  --color.surface-card: rgb(var(--surface.rgb));
  --color.surface-elevated: color-mix(in srgb, rgb(var(--surface.rgb)) 92%, black);

  /* Aktionen & Links */
  --color.action-primary: rgb(var(--brand.accent.rgb));
  --color.action-primary.hover: color-mix(in srgb, rgb(var(--brand.accent.rgb)) 90%, black);
  --color.link: rgb(var(--brand.accent.rgb));

  /* Status */
  --color.ok: rgb(var(--ok.rgb));
  --color.warn: rgb(var(--warn.rgb));
  --color.error: rgb(var(--error.rgb));

  /* Fokus */
  --focus.outline: 0 0 0 3px color-mix(in srgb, rgb(var(--brand.accent.rgb)) 30%, white);

  /* Komponenten */
  --comp.header.bg: rgb(var(--bg.rgb));
  --comp.header.fg: rgb(var(--fg.rgb));
  --comp.footer.bg: rgb(var(--surface.rgb));
  --comp.footer.fg: rgb(var(--fg.rgb));
  --comp.button.bg: rgb(var(--brand.accent.rgb));
  --comp.button.bg.hover: color-mix(in srgb, rgb(var(--brand.accent.rgb)) 88%, black);
  --comp.button.fg: rgb(255 255 255);
  --comp.button.border: color-mix(in srgb, rgb(var(--brand.accent.rgb)) 40%, white);

  /* Elevation Semantics */
  --elevation.card: var(--shadow.lift);
  --elevation.navbar: var(--shadow.layer);
  --elevation.overlay: var(--shadow.overlay);
}