:root {
  /* Brand palette: primary = Premium-Gold, secondary = Natur-Gruen. */
  --color-primary-base: #8c6a2f;
  --color-secondary-base: #57765f;

  --color-primary-50: color-mix(in srgb, var(--color-primary-base) 4%, white);
  --color-primary-100: color-mix(in srgb, var(--color-primary-base) 10%, white);
  --color-primary-200: color-mix(in srgb, var(--color-primary-base) 22%, white);
  --color-primary-500: color-mix(in srgb, var(--color-primary-base) 68%, white);
  --color-primary-600: color-mix(in srgb, var(--color-primary-base) 85%, white);
  --color-primary-700: var(--color-primary-base);
  --color-primary-800: color-mix(in srgb, var(--color-primary-base) 76%, black);
  --color-primary-900: color-mix(in srgb, var(--color-primary-base) 48%, black);
  --color-primary-950: color-mix(in srgb, var(--color-primary-base) 28%, black);

  --color-secondary-100: color-mix(in srgb, var(--color-secondary-base) 10%, white);
  --color-secondary-300: color-mix(in srgb, var(--color-secondary-base) 45%, white);
  --color-secondary-500: var(--color-secondary-base);
  --color-secondary-600: color-mix(in srgb, var(--color-secondary-base) 78%, black);
  --color-secondary-700: color-mix(in srgb, var(--color-secondary-base) 55%, black);
  --color-secondary-800: color-mix(in srgb, var(--color-secondary-base) 34%, black);

  --color-white: #ffffff;
  --color-black: #000000;
  --color-neutral-100: #f4f3f3;
  --color-neutral-150: #f5f5f5;
  --color-neutral-200: #eeeeee;
  --color-neutral-225: #dddddd;
  --color-neutral-250: #e7e7e7;
  --color-neutral-300: #e3e3e3;
  --color-neutral-450: #a3a3a3;
  --color-neutral-500: #a4a4a4;
  --color-neutral-600: #7d7d7d;
  --color-neutral-650: #60697b;
  --color-neutral-675: #615e5e;
  --color-neutral-700: #484848;
  --color-neutral-750: #333333;
  --color-neutral-800: #343f52;
  --color-neutral-900: #222222;

  /* Main roles for new CSS. */
  --color-primary: var(--color-primary-700);
  --color-primary-hover: var(--color-primary-800);
  --color-primary-alt: var(--color-primary-600);
  --color-primary-bright: var(--color-primary-500);
  --color-primary-muted: var(--color-primary-200);
  --color-primary-soft: var(--color-primary-100);
  --color-primary-contrast: var(--color-white);
  --color-primary-border: var(--color-primary);
  --color-secondary: var(--color-secondary-500);
  --color-secondary-hover: var(--color-secondary-600);
  --color-secondary-muted: var(--color-secondary-300);
  --color-secondary-soft: var(--color-secondary-100);
  --color-secondary-contrast: var(--color-white);
  --color-secondary-border: var(--color-secondary);
  --color-footer-bg: var(--color-black);
  --color-page-bg: var(--color-white);
  --color-surface: var(--color-white);
  --color-surface-muted: var(--color-neutral-100);
  --color-surface-subtle: var(--color-neutral-200);
  --color-border: var(--color-primary);
  --color-border-muted: var(--color-neutral-300);
  --color-text: var(--color-primary-950);
  --color-text-strong: var(--color-primary-900);
  --color-text-heading: var(--color-neutral-900);
  --color-text-body: var(--color-neutral-700);
  --color-text-muted: var(--color-neutral-600);
  --color-text-soft: var(--color-neutral-500);
  --color-text-control: var(--color-neutral-650);
  --color-text-control-strong: var(--color-neutral-800);
  --color-print-text: var(--color-neutral-750);
  --color-tooltip-trigger: var(--color-neutral-675);
  --color-map-placeholder: var(--color-neutral-450);
  --color-accent: var(--color-primary-bright);
  --color-accent-muted: var(--color-primary-muted);

  /* Alternative, signal and warning colors. */
  --color-info: #3085ee;
  --color-info-bg: #cde9f6;
  --color-info-border: #4780aa;
  --color-success: #499a77;
  --color-success-bg: #def2d7;
  --color-success-bright: #81b441;
  --color-success-strong: #198754;
  --color-success-border: var(--color-success);
  --color-warning: #927238;
  --color-warning-bg: #f7f3d7;
  --color-warning-border: var(--color-warning);
  --color-danger: #dc3545;
  --color-danger-bg: #fff5f8;
  --color-danger-strong: #e11515;
  --color-danger-border: var(--color-danger);
  --color-error: #ab3331;
  --color-error-bg: #ecc8c5;
  --color-error-border: var(--color-error);
  --color-purple-1: #7e53f9;

  /* Overlays and shadows. */
  --color-overlay: rgba(0, 0, 0, 0.3);
  --color-overlay-soft: rgba(0, 0, 0, 0.22);
  --color-overlay-primary: color-mix(in srgb, var(--color-primary-950) 30%, transparent);
  --color-overlay-primary-strong: color-mix(in srgb, var(--color-primary-950) 30%, transparent);
  --color-overlay-primary-top: color-mix(in srgb, var(--color-primary-950) 28%, transparent);
  --color-overlay-primary-mid: color-mix(in srgb, var(--color-primary-950) 30%, transparent);
  --color-overlay-primary-clear: transparent;
  --color-selection-hover: color-mix(in srgb, var(--color-primary) 12%, transparent);
  --color-selection-active: var(--color-primary);
  --color-control-glass: rgba(255, 255, 255, 0.2);
  --color-brand-wash: color-mix(in srgb, var(--color-primary) 5%, transparent);
  --color-brand-wash-strong: color-mix(in srgb, var(--color-primary) 10%, transparent);
  --shadow-none: 0 10px 50px transparent;
  --shadow-switch: 0 10px 50px color-mix(in srgb, var(--color-primary-950) 10%, transparent);
  --shadow-card: 0 0 46px -12px color-mix(in srgb, var(--color-primary-950) 56%, transparent);
  --shadow-soft: 0 0.25rem 0.75rem color-mix(in srgb, var(--color-primary-950) 15%, transparent);

  /* Compatibility aliases for the old template CSS. Do not use for new design work. */
  --color-dark-1: var(--color-black);
  --color-dark-2: var(--color-primary-alt);
  --color-dark-3: var(--color-secondary-700);
  --color-dark-4: var(--color-secondary-600);
  --text-dark-1: var(--color-dark-1);
  --color-light-1: var(--color-text-muted);
  --color-light-2: var(--color-surface-muted);
  --color-light-3: var(--color-border-muted);
  --color-light-5: var(--color-neutral-225);
  --color-light-7: var(--color-neutral-150);
  --color-light-8: var(--color-neutral-250);
  --color-blue-1: var(--color-text);
  --color-blue-2: var(--color-info-bg);
  --color-green-1: var(--color-secondary-muted);
  --color-green-2: var(--color-secondary);
  --color-yellow-1: var(--color-primary-bright);
  --color-yellow-2: var(--color-primary-alt);
  --color-yellow-3: var(--color-accent);
  --color-yellow-4: var(--color-primary-soft);
  --color-brown-1: var(--color-primary-hover);
  --color-red-1: var(--color-danger-strong);
  --color-red-2: var(--color-danger);
  --color-red-3: var(--color-danger-bg);
  --color-info-1: var(--color-info-bg);
  --color-info-2: var(--color-info-border);
  --color-warning-1: var(--color-warning-bg);
  --color-warning-2: var(--color-warning);
  --color-error-1: var(--color-error-bg);
  --color-error-2: var(--color-error);
  --color-success-1: var(--color-success-bg);
  --color-success-2: var(--color-success-strong);
  --color-overlay-green: var(--color-overlay-primary);
  --color-overlay-green-strong: var(--color-overlay-primary-strong);
  --color-overlay-blue-top: var(--color-overlay-primary-top);
  --color-overlay-blue-mid: var(--color-overlay-primary-mid);
  --color-overlay-blue-clear: var(--color-overlay-primary-clear);
  --color-template-blue-clear: var(--color-overlay-primary-clear);
  --color-template-blue-40: color-mix(in srgb, var(--color-primary-950) 40%, transparent);
  --color-template-blue-50: color-mix(in srgb, var(--color-primary-950) 50%, transparent);
  --color-template-blue-60: color-mix(in srgb, var(--color-primary-950) 60%, transparent);
  --color-template-blue-70: color-mix(in srgb, var(--color-primary-950) 70%, transparent);
  --color-template-deep-30: color-mix(in srgb, var(--color-primary-950) 30%, transparent);
  --color-template-gray-clear: transparent;
  --color-template-black-05: rgba(0, 0, 0, 0.05);
  --color-template-black-08: rgba(0, 0, 0, 0.08);
  --color-template-black-20: rgba(0, 0, 0, 0.2);
  --color-template-black-30: rgba(0, 0, 0, 0.3);
  --color-template-black-50: rgba(0, 0, 0, 0.5);
  --color-template-shadow-black-08: rgba(0, 0, 0, 0.08);
  --color-template-white-10: rgba(255, 255, 255, 0.1);
  --color-template-white-15: rgba(255, 255, 255, 0.15);
  --color-template-white-20: rgba(255, 255, 255, 0.2);
  --color-template-white-50: rgba(255, 255, 255, 0.5);
  --color-template-white-70: rgba(255, 255, 255, 0.7);
  --color-template-shadow-blue-03: color-mix(in srgb, var(--color-primary-950) 3%, transparent);
  --color-template-shadow-blue-05: color-mix(in srgb, var(--color-primary-950) 5%, transparent);
  --color-template-shadow-blue-07: color-mix(in srgb, var(--color-primary-950) 7%, transparent);
  --color-template-shadow-blue-10: color-mix(in srgb, var(--color-primary-950) 10%, transparent);
  --color-template-shadow-brand-07: color-mix(in srgb, var(--color-primary-950) 7%, transparent);
  --color-switch-shadow: color-mix(in srgb, var(--color-primary-950) 10%, transparent);

  /* Landing premium aliases. */
  --lp-gold: var(--color-primary);
  --lp-gold-2: var(--color-primary-alt);
  --lp-gold-3: var(--color-primary-muted);
  --lp-ink: var(--color-primary-950);
  --lp-ink-2: var(--color-primary-900);
  --lp-muted: #5a5750;
  --lp-stone: #8c8a82;
  --lp-rule: #e0ddd4;
  --lp-warm: #fafaf6;
  --lp-tint: #f3f0e8;
  --lp-contrast: var(--color-white);
  --lp-panel-bg: var(--color-white);
  --lp-warning-bg: var(--color-primary-soft);
  --lp-warning-text: var(--color-primary-hover);
  --lp-selected-bg: var(--color-primary-50);
  --lp-package-cols: 3;
  --lp-hero-overlay: color-mix(in srgb, var(--color-primary-950) 30%, transparent);
  --lp-card-overlay: color-mix(in srgb, var(--color-primary-950) 30%, transparent);
  --lp-hero-overlay-strong: color-mix(in srgb, var(--color-primary-950) 30%, transparent);
  --lp-hero-overlay-mid: color-mix(in srgb, var(--color-primary-950) 24%, transparent);
  --lp-hero-overlay-soft: color-mix(in srgb, var(--color-primary-950) 10%, transparent);
  --lp-hero-overlay-faint: color-mix(in srgb, var(--color-primary-950) 6%, transparent);
  --lp-hero-overlay-clear: color-mix(in srgb, var(--color-primary-950) 12%, transparent);
  --lp-white-strong: rgba(255, 255, 255, 0.96);
  --lp-white-muted: rgba(255, 255, 255, 0.72);
  --lp-white-soft: rgba(255, 255, 255, 0.58);
  --lp-white-faint: rgba(255, 255, 255, 0.48);
  --lp-white-dim: rgba(255, 255, 255, 0.45);
  --lp-white-hairline: rgba(255, 255, 255, 0.1);
  --lp-white-border: rgba(255, 255, 255, 0.18);
  --lp-white-border-strong: rgba(255, 255, 255, 0.22);
  --lp-white-wash: rgba(255, 255, 255, 0.06);
  --lp-accent-wash: color-mix(in srgb, var(--color-primary) 8%, transparent);
  --lp-accent-border: color-mix(in srgb, var(--color-primary) 25%, transparent);
  --lp-accent-border-strong: color-mix(in srgb, var(--color-primary) 45%, transparent);
  --lp-accent-shadow: 0 12px 34px color-mix(in srgb, var(--color-primary) 12%, transparent);
  --lp-accent-shadow-strong: 0 18px 42px color-mix(in srgb, var(--color-primary) 24%, transparent);
  --lp-shadow-chip: 0 8px 20px color-mix(in srgb, var(--color-primary-950) 22%, transparent);
  --lp-shadow-modal: 0 24px 72px rgba(0, 0, 0, 0.24);
  --lp-shadow-toast: 0 20px 50px rgba(0, 0, 0, 0.18);

  --sh-white: var(--color-white);
  --sh-black: var(--color-black);
  --sh-purple-500: var(--color-purple-1);
}