:root {
    --neutral-000: #ffffff;
    --neutral-100: #fcffff;
    --neutral-150: #fcfcfd;
    --neutral-200: #f2f5f5;
    --neutral-300: #e8eded;
    --neutral-400: #cfd1d1;
    --neutral-500: #a1a3a3;
    --neutral-600: #727373;
    --neutral-700: #444545;
    --neutral-800: #262626;
    --neutral-850: #1a1a1a;
    --neutral-900: #0d0d0d;

    --brand-100: #f1fafb;
    --brand-200: #d9f5f8;
    --brand-300: #93dce4;
    --brand-400: #00bfd6;
    --brand-400-rgb: 0, 191, 214;
    --brand-500: #009dae;
    --brand-600: #006e7b;

    --green-100: #e4f5ed;
    --green-200: #b3e5cf;
    --green-300: #36bb7f;
    --green-400: #03a85e;

    --red-100: #f5e5e4;
    --red-200: #e5b6b3;
    --red-300: #bb3e36;
    --red-400: #a80e03;

    --watermelon-100: #ffebeb;
    --watermelon-200: #fe5c62;
    --watermelon-300: #fe2e38;
    --watermelon-400: #ab2126;

    --blue-100: #e6eef6;
    --blue-200: #b3cce5;
    --blue-300: #3577b9;
    --blue-400: #0356a8;

    --orange-100: #f6ede6;
    --orange-200: #f7dcc3;
    --orange-300: #e58b37;
    --orange-400: #e56e00;

    --neutral-100-05: rgba(252, 255, 255, 0.05);
    --neutral-100-19: rgba(252, 255, 255, 0.19);
    --neutral-200-08: rgba(242, 245, 245, 0.08);
    --neutral-900-05: rgba(13, 13, 13, 0.05);
    --neutral-800-08: rgba(38, 38, 38, 0.08);
    --neutral-900-19: rgba(13, 13, 13, 0.19);
    --neutral-900-75: rgba(13, 13, 13, 0.75);
    --neutral-900-80: rgba(13, 13, 13, 0.8);
    --neutral-900-90: rgba(13, 13, 13, 0.9);

    --action-success-lightest: var(--green-100);
    --action-success-light: var(--green-200);
    --action-success-dark: var(--green-300);
    --action-success-darkest: var(--green-400);

    --action-error-lightest: var(--red-100);
    --action-error-light: var(--red-200);
    --action-error-dark: var(--red-300);
    --action-error-darkest: var(--red-400);

    --action-warning-lightest: var(--orange-100);
    --action-warning-light: var(--orange-200);
    --action-warning-dark: var(--orange-300);
    --action-warning-darkest: var(--orange-400);

    --action-info-lightest: var(--blue-100);
    --action-info-light: var(--blue-200);
    --action-info-dark: var(--blue-300);
    --action-info-darkest: var(--blue-400);

    --cta-primary-default: var(--brand-400);
    --cta-primary-hover: var(--brand-500);
    --cta-primary-pressed: var(--brand-600);
    --cta-primary-label: var(--neutral-000);
    --cta-primary-focus: var(--text-tertiary);

    --cta-secondary-default: var(--neutral-600);
    --cta-secondary-hover: var(--neutral-800);
    --cta-secondary-pressed: var(--surface-dark);
    --cta-secondary-label: var(--text-tertiary);
    --cta-secondary-label-hovered: var(--text-secondary);

    --cta-tertiary-default: var(--statelayer-default);
    --cta-tertiary-hover: var(--statelayer-hover);
    --cta-tertiary-pressed: var(--statelayer-pressed);
    --cta-tertiary-focus: var(--statelayer-focus);
    --cta-tertiary-label: var(--text-tertiary);
    --cta-tertiary-label-hovered: var(--text-secondary);

    --cta-onmedia-default-bg: var(--overlay-dark);
    --cta-onmedia-default-border: var(--neutral-000);
    --cta-onmedia-hover: var(--overlay-default);
    --cta-onmedia-pressed: var(--overlay-darkest);
    --cta-onmedia-focused: var(--overlay-default);
    --cta-onmedia-label: var(--neutral-000);


    --cta-ghost-black-default: var(--neutral-800);
    --cta-ghost-black-hover: var(--neutral-900);
    --cta-ghost-black-pressed: var(--neutral-800);
    --cta-ghost-black-focus: var(--brand-800);

    --promo-red-lighter: var(--watermelon-100);
    --promo-red-light: var(--watermelon-200);
    --promo-red-dark: var(--watermelon-300);

    --text-primary: var(--neutral-900);
    --text-secondary: var(--neutral-800);
    --text-tertiary: var(--neutral-700);
    --text-quaternary: var(--neutral-600);
    --text-link: var(--brand-400);
    --text-brand: var(--brand-400);
    --text-link-hover: var(--brand-500);
    --text-link-pressed: var(--brand-600);
    --text-placeholder: var(--neutral-500);

    --icon-neutral: var(--neutral-800);
    --icon-primary: var(--brand-400);
    --icon-secondary: var(--neutral-000);

    --surface-primary: var(--neutral-000);
    --surface-secondary: var(--neutral-200);
    --surface-tertiary: var(--neutral-300);
    --surface-quaternary: var(--neutral-400);
    --surface-focus: var(--neutral-500);
    --surface-dark: var(--neutral-900);
    --surface-highlight: var(--brand-100);
    --surface-active: var(--brand-400);

    --statelayer-default: var(--neutral-900-05);
    --statelayer-hover: var(--neutral-800-08);
    --statelayer-pressed: var(--neutral-900-19);
    --statelayer-focus: var(--neutral-800-08);

    --border-default: var(--neutral-300);
    --border-emphasis: var(--neutral-400);
    --border-hover: var(--neutral-500);
    --border-active: var(--neutral-800);

    --overlay-default: var(--neutral-900-75);
    --overlay-dark: var(--neutral-900-80);
    --overlay-darkest: var(--neutral-900-90);

    --background-primary: var(--neutral-150);
    --background-secondary: var(--neutral-200);
    --background-tertiary: var(--neutral-300);
    --background-quaternary: var(--neutral-400);
}

body.darkmode {
    --action-success-lightest: var(--green-400);
    --action-success-light: var(--green-300);
    --action-success-dark: var(--green-200);
    --action-success-darkest: var(--green-100);

    --action-error-lightest: var(--red-400);
    --action-error-light: var(--red-300);
    --action-error-dark: var(--red-200);
    --action-error-darkest: var(--red-100);

    --action-warning-lightest: var(--orange-400);
    --action-warning-light: var(--orange-300);
    --action-warning-dark: var(--orange-200);
    --action-warning-darkest: var(--orange-100);

    --action-inco-lightest: var(--blue-400);
    --action-info-light: var(--blue-300);
    --action-info-dark: var(--blue-200);
    --action-info-darkest: var(--blue-100);

    --cta-primary-default: var(--brand-400);
    --cta-primary-hover: var(--brand-500);
    --cta-primary-pressed: var(--brand-600);
    --cta-primary-focus: var(--text-tertiary);

    --cta-secondary-default: var(--neutral-500);
    --cta-secondary-hover: var(--neutral-300);
    --cta-secondary-pressed: var(--surface-dark);
    --cta-secondary-label: var(--text-tertiary);
    --cta-secondary-label-hovered: var(--text-secondary);

    --cta-tertiary-default: var(--statelayer-default);
    --cta-tertiary-hover: var(--statelayer-hover);
    --cta-tertiary-pressed: var(--statelayer-pressed);
    --cta-tertiary-focus: var(--statelayer-focus);
    --cta-tertiary-label: var(--text-tertiary);
    --cta-tertiary-label-hovered: var(--text-secondary);

    --cta-onmedia-default-bg: rgba(13, 13, 13, 0.8);
    --cta-onmedia-default-border: rgba(255, 255, 255, 1);
    --cta-onmedia-hover: rgba(13, 13, 13, 0.75);
    --cta-onmedia-pressed: rgba(13, 13, 13, 0.9);
    --cta-onmedia-focus: rgba(13, 13, 13, 0.75);

    --cta-ghost-black-default: var(--neutral-800);
    --cta-ghost-black-hover: var(--neutral-900);
    --cta-ghost-black-pressed: var(--neutral-800);
    --cta-ghost-black-focus: var(--brand-800);

    --promo-red-lighter: var(--watermelon-400);
    --promo-red-light: var(--watermelon-200);
    --promo-red-dark: var(--watermelon-100);

    --text-primary: var(--neutral-200);
    --text-secondary: var(--neutral-300);
    --text-tertiary: var(--neutral-400);
    --text-quaternary: var(--neutral-500);
    --text-link: var(--text-tertiary);
    --text-link-hover: var(--text-primary);
    --text-link-pressed: var(--brand-600);
    --text-brand: var(--brand-400);

    --icon-neutral: var(--neutral-200);
    --icon-primary: var(--brand-400);
    --icon-secondary: var(--neutral-000);

    --surface-primary: var(--neutral-800);
    --surface-secondary: var(--neutral-700);
    --surface-tertiary: var(--neutral-600);
    --surface-quaternary: var(--neutral-500);
    --surface-focus: var(--neutral-400);
    --surface-dark: var(--neutral-100);
    --surface-highlight: var(--surface-secondary);
    --surface-highlight-dark: var(--surface-secondary);
    --surface-active: var(--brand-400);

    --background-primary: var(--neutral-850);
    --background-secondary: var(--neutral-800);
    --background-tertiary: var(--neutral-700);
    --background-quaternary: var(--neutral-600);

    --overlay-default: var(--neutral-900-75);
    --overlay-dark: var(--neutral-900-80);
    --overlay-darkest: var(--neutral-900-90);

    --border-default: var(--neutral-700);
    --border-emphasis: var(--neutral-600);
    --border-hover: var(--neutral-500);
    --border-active: var(--brand-400);

    --statelayer-default: var(--neutral-100-05);
    --statelayer-hover: var(--neutral-200-08);
    --statelayer-pressed: var(--neutral-100-19);
    --statelayer-focus: var(--neutral-200-08);
}