:root,
html.brand-spielberg {
  --brand-primary-base: #202020;
  --brand-secondary-base: #555f5a;
  --brand-border: #555f5a;
  --brand-success-strong: #5b7052;
  --brand-danger-strong: #d93025;
  --brand-template-dark-1: #202020;
  --brand-template-dark-2: #0d2857;
  --brand-template-dark-3: #13357b;
  --brand-template-dark-4: #163c8c;
  --brand-template-blue-1: #051036;
  --brand-template-yellow-1: #f8d448;
  --brand-template-yellow-2: #e1c03f;
  --brand-template-yellow-3: #f4b332;
  --brand-template-yellow-4: #fff8dd;
  --brand-template-brown-1: #923e01;
}

html.brand-schitterhof {
  --brand-primary-base: #8c6a2f;
  --brand-secondary-base: #57765f;
  --brand-border: var(--color-primary);
  --brand-success-strong: #198754;
  --brand-danger-strong: #e11515;
  --brand-template-dark-1: #000000;
  --brand-template-dark-2: var(--color-primary-alt);
  --brand-template-dark-3: var(--color-secondary-700);
  --brand-template-dark-4: var(--color-secondary-600);
  --brand-template-blue-1: var(--color-text);
  --brand-template-yellow-1: var(--color-primary-bright);
  --brand-template-yellow-2: var(--color-primary-alt);
  --brand-template-yellow-3: var(--color-accent);
  --brand-template-yellow-4: var(--color-primary-soft);
  --brand-template-brown-1: var(--color-primary-hover);
}

:root {
  --color-primary-base: var(--brand-primary-base);
  --color-secondary-base: var(--brand-secondary-base);

  --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;

  --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(--brand-border);
  --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);

  --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: var(--brand-success-strong);
  --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: var(--brand-danger-strong);
  --color-danger-border: var(--color-danger);
  --color-error: #ab3331;
  --color-error-bg: #ecc8c5;
  --color-error-border: var(--color-error);
  --color-purple-1: #7e53f9;

  --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);

  --color-dark-1: var(--brand-template-dark-1);
  --color-dark-2: var(--brand-template-dark-2);
  --color-dark-3: var(--brand-template-dark-3);
  --color-dark-4: var(--brand-template-dark-4);
  --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(--brand-template-blue-1);
  --color-blue-2: var(--color-info-bg);
  --color-green-1: var(--color-secondary-muted);
  --color-green-2: var(--color-secondary);
  --color-yellow-1: var(--brand-template-yellow-1);
  --color-yellow-2: var(--brand-template-yellow-2);
  --color-yellow-3: var(--brand-template-yellow-3);
  --color-yellow-4: var(--brand-template-yellow-4);
  --color-brown-1: var(--brand-template-brown-1);
  --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);

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