:root {
  /* primitive colors */

  /* ral */
  --color-brand-ral-9005: #0a0c10;
  --color-brand-ral-9016: #f1f0ea;

  /* base */
  --color-brand-base-white: #fff;
  --color-brand-base-black: #000;
  --color-brand-base-transparent: transparent;
  --color-brand-base-orange: #ed7d18;
  --color-brand-base-brown: #79614e;

  /* grey */
  --color-brand-grey-default: #999;
  --color-brand-grey-dark: #666;
  --color-brand-grey-darker: #333;
  --color-brand-grey-light: #d1d1d1;
  --color-brand-grey-lighter: #ededed;

  /* --color-brand-grey-lighter: #f1f1f1; */

  /* blue */
  --color-brand-blue-default: #1b33cb;
  --color-brand-blue-dark: #15289e;
  --color-brand-blue-darker: #0f1c71;
  --color-brand-blue-light: #6174ea;
  --color-brand-blue-lighter: #bbc3f6;

  /* yellow */
  --color-brand-yellow-default: #ffff00;
  --color-brand-yellow-dark: #999900;
  --color-brand-yellow-darker: #666600;
  --color-brand-yellow-light: #ffff66;
  --color-brand-yellow-lighter: #ffffcc;

  /* green */
  --color-brand-green-default: #008000;
  --color-brand-green-dark: #004d00;
  --color-brand-green-darker: #003300;
  --color-brand-green-light: #80ff80;
  --color-brand-green-lighter: #ccffcc;

  /* red */
  --color-brand-red-default: #ff0000;
  --color-brand-red-dark: #990000;
  --color-brand-red-darker: #660000;
  --color-brand-red-light: #ff6666;
  --color-brand-red-lighter: #ffcccc;

  /* orange */
  --color-brand-orange-default: #ed7d18;
  --color-brand-orange-dark: #c2630f;
  --color-brand-orange-darker: hsl(28, 86%, 35%);
  --color-brand-orange-light: #f19646;
  --color-brand-orange-lighter: hsl(28, 86%, 71%);

  /* brown */
  --color-brand-brown-default: #79614e;
  --color-brand-brown-dark: #6d5746;
  --color-brand-brown-darker: hsl(27, 22%, 30%);
  --color-brand-brown-light: #8c705a;
  --color-brand-brown-lighter: hsl(27, 22%, 50%);

  /* browser defaults */
  --color-focus-ring: #005fcc;

  /* alias */

  /* primary */
  --color-alias-primary: var(--color-brand-ral-9005);

  /* secondary */
  --color-alias-secondary: var(--color-brand-ral-9016);

  /* neutral */
  --color-alias-neutral-default: var(--color-brand-grey-default);
  --color-alias-neutral-dark: var(--color-brand-grey-dark);
  --color-alias-neutral-darker: var(--color-brand-grey-darker);
  --color-alias-neutral-light: var(--color-brand-grey-light);
  --color-alias-neutral-lighter: var(--color-brand-grey-lighter);
  --color-alias-base-white: var(--color-brand-base-white);
  --color-alias-base-black: var(--color-brand-base-black);
  --color-alias-base-transparent: var(--color-brand-base-transparent);
  --color-alias-henk-black: var(--color-brand-ral-9005);
  --color-alias-henk-white: var(--color-brand-ral-9016);

  /* info */
  --color-alias-information-default: var(--color-brand-blue);
  --color-alias-information-darker: var(--color-brand-blue-darker);
  --color-alias-information-dark: var(--color-brand-blue-dark);
  --color-alias-information-light: var(--color-brand-blue-light);
  --color-alias-information-lighter: var(--color-brand-blue-lighter);

  /* success */
  --color-alias-success-default: var(--color-brand-green-default);
  --color-alias-success-darker: var(--color-brand-green-darker);
  --color-alias-success-dark: var(--color-brand-green-dark);
  --color-alias-success-light: var(--color-brand-green-light);
  --color-alias-success-lighter: var(--color-brand-green-lighter);

  /* warning */
  --color-alias-warning-default: var(--color-brand-yellow-default);
  --color-alias-warning-dark: var(--color-brand-yellow-darker);
  --color-alias-warning-light: var(--color-brand-yellow-lighter);

  /* danger */
  --color-alias-danger-default: var(--color-brand-red-default);
  --color-alias-danger-dark: var(--color-brand-red-dark);
  --color-alias-danger-light: var(--color-brand-red-lighter);

  /* highlight */
  --color-alias-highlight-default: var(--color-brand-orange-default);
  --color-alias-highlight-dark: var(--color-brand-orange-dark);
  --color-alias-highlight-light: var(--color-brand-orange-light);

  /* sustainability */
  --color-alias-sustainability-default: var(--color-brand-brown-default);
  --color-alias-sustainability-dark: var(--color-brand-brown-dark);
  --color-alias-sustainability-light: var(--color-brand-brown-light);

  /* mapped / ui */

  /* surface */
  --color-ui-surface-default: var(--color-alias-base-white);
  --color-ui-surface-page: var(--color-alias-base-white);
  --color-ui-surface-primary: var(--color-alias-primary);
  --color-ui-surface-secondary: var(--color-alias-secondary);
  --color-ui-surface-neutral: var(--color-alias-neutral-lighter);
  --color-ui-surface-henk-white: var(--color-alias-henk-white);
  --color-ui-surface-base-white: var(--color-alias-base-white);
  --color-ui-surface-henk-black: var(--color-alias-henk-black);
  --color-ui-surface-base-black: var(--color-alias-base-black);
  --color-ui-surface-transparent: var(--color-alias-base-transparent);
  --color-ui-surface-information: var(--color-alias-information-lighter);
  --color-ui-surface-success: var(--color-alias-success-lighter);
  --color-ui-surface-success-dark: var(--color-alias-success-dark);
  --color-ui-surface-warning: var(--color-alias-warning-light);
  --color-ui-surface-danger: var(--color-alias-danger-light);
  --color-ui-surface-disabled: var(--color-alias-neutral-light);
  --color-ui-surface-sustainability: var(--color-alias-sustainability-default);
  --color-ui-surface-sustainability-dark: var(--color-alias-sustainability-dark);
  --color-ui-surface-highlight: var(--color-alias-highlight-default);

  /* text */
  --color-ui-text-default: var(--color-alias-henk-black);
  --color-ui-text-body: var(--color-alias-henk-black);
  --color-ui-text-action: var(--color-alias-sustainability-default, #79614e);
  --color-ui-text-action-hover: var(--color-alias-sustainability-dark, #000);
  --color-ui-text-primary: var(--color-alias-primary, #000);
  --color-ui-text-secondary: var(--color-alias-secondary, #fff);
  --color-ui-text-disabled: var(--color-alias-neutral-default);
  --color-ui-text-neutral: var(--color-alias-neutral-default);
  --color-ui-text-on-information: var(--color-alias-information-dark);
  --color-ui-text-on-success: var(--color-alias-success-dark);
  --color-ui-text-on-warning: var(--color-alias-warning-dark);
  --color-ui-text-danger: var(--color-alias-danger-default);
  --color-ui-text-success: var(--color-alias-success-default);
  --color-ui-text-on-danger: var(--color-alias-danger-dark);
  --color-ui-text-on-highlight: var(--color-alias-base-black);
  --color-ui-text-sustainability: var(--color-alias-sustainability-default);
  --color-ui-text-on-sustainability: var(--color-alias-base-white);
  --color-ui-text-action-dimmed: var(--color-alias-neutral-default, #666);
  --color-ui-text-on-dark: var(--color-alias-base-white);

  /* new */
  --color-text-body: var(--color-alias-henk-black);
  --color-text-link: var(--color-alias-sustainability-default, #79614e);
  --color-text-disabled: var(--color-alias-neutral-default);

  /* border */
  --color-ui-border-default: var(--color-alias-neutral-light);
  --color-ui-border-primary: var(--color-alias-primary);
  --color-ui-border-secondary: var(--color-alias-secondary);
  --color-ui-border-neutral: var(--color-alias-neutral-default);
  --color-ui-border-henk-black: var(--color-alias-henk-black);
  --color-ui-border-henk-white: var(--color-alias-henk-white);
  --color-ui-border-on-information: var(--color-alias-information-dark);
  --color-ui-border-on-success: var(--color-alias-success-dark);
  --color-ui-border-on-warning: var(--color-alias-warning-dark);
  --color-ui-border-on-danger: var(--color-alias-danger-dark);
  --color-ui-border-on-dark: var(--color-alias-base-white);
  --color-ui-border-transparent: var(--color-alias-base-transparent);
  --color-ui-border-sustainability: var(--color-alias-sustainability-default);
  --color-ui-border-danger: var(--color-alias-danger-default);
  --color-ui-border-success: var(--color-alias-success-default);

  /* leftovers */
  --color-autofill-input: var(--color-alias-base-white);
}