@import url(themes.css);

:root {
    /* Background */
    --color-bg-default: var(--neutral-white);
    --color-bg-subtler: var(--neutral-50);
    --color-bg-subtle: var(--neutral-100);
    --color-bg-inverse: var(--neutral-900);
    --color-bg-disabled: var(--neutral-200);
    --color-bg-primary: var(--brand-primary-500);
    --color-bg-primary-subtler:  var(--brand-primary-alpha);
    --color-bg-danger: var(--accent-red-500);
    --color-bg-danger-subtler: var(--accent-red-100);
    --color-bg-warning: var(--accent-orange-500);
    --color-bg-warning-subtler: var(--accent-orange-100);
    --color-bg-caution: var(--accent-yellow-500);
    --color-bg-caution-subtler: var(--accent-yellow-100);
    --color-bg-success: var(--accent-green-500);
    --color-bg-success-subtler: var(--accent-green-100);
    --color-bg-information: var(--accent-blue-500);
    --color-bg-information-subtler: var(--accent-blue-100);
    --color-bg-point: var(--accent-purple-500);
    --color-bg-point-subtler: var(--accent-purple-100);

    /* Border */
    --color-border-inverse: var(--neutral-white);
    --color-border-disabled: var(--neutral-300);
    --color-border-light: var(--neutral-100);
    --color-border: var(--neutral-200);
    --color-border-dark: var(--neutral-400);
    --color-border-primary-light: var(--brand-primary-100);
    --color-border-primary: var(--brand-primary-500);
    --color-border-danger-lighter: var(--accent-red-100);
    --color-border-danger-light: var(--accent-red-300);
    --color-border-danger: var(--accent-red-500);
    --color-border-warning-lighter: var(--accent-orange-100);
    --color-border-warning-light: var(--accent-orange-300);
    --color-border-warning: var(--accent-orange-500);
    --color-border-caution-lighter: var(--accent-yellow-100);
    --color-border-caution-light: var(--accent-yellow-300);
    --color-border-caution: var(--accent-yellow-500);
    --color-border-success-lighter: var(--accent-green-100);
    --color-border-success-light: var(--accent-green-300);
    --color-border-success: var(--accent-green-500);
    --color-border-information-lighter: var(--accent-blue-100);
    --color-border-information-light: var(--accent-blue-300);
    --color-border-information: var(--accent-blue-500);
    --color-border-point-lighter: var(--accent-purple-100);
    --color-border-point-light: var(--accent-purple-300);
    --color-border-point: var(--accent-purple-500);

    /* Divider */
    --color-divider-lighter: var(--neutral-100);
    --color-divider-light: var(--neutral-200);
    --color-divider: var(--neutral-300);
    --color-divider-dark: var(--neutral-400);
    --color-divider-inverse: var(--neutral-white);
    --color-divider-primary-light: var(--brand-primary-100);
    --color-divider-primary: var(--brand-primary-500);

    /* Text */
    --color-text-bold: var(--neutral-900);
    --color-text: var(--neutral-800);
    --color-text-subtle: var(--neutral-600);
    --color-text-disabled: var(--neutral-400);
    --color-text-disabled-on-disabled: var(--neutral-500);
    --color-text-blod-inverse: var(--neutral-white);
    --color-text-inverse: var(--neutral-white);
    --color-text-subtle-inverse: var(--neutral-white);
    --color-text-primary-bold: var(--brand-primary-900);
    --color-text-primary: var(--brand-primary-500);
    --color-text-primary-dark: var(--brand-primary-700);
    --color-text-danger-light: var(--accent-red-500);
    --color-text-danger: var(--accent-red-700);
    --color-text-danger-dark: var(--accent-red-900);
    --color-text-warning-light: var(--accent-orange-500);
    --color-text-warning: var(--accent-orange-700);
    --color-text-warning-dark: var(--accent-orange-900);
    --color-text-success-light: var(--accent-green-500);
    --color-text-success: var(--accent-green-700);
    --color-text-success-dark: var(--accent-green-900);
    --color-text-information-light: var(--accent-blue-500);
    --color-text-information: var(--accent-blue-700);
    --color-text-information-dark: var(--accent-blue-900);
    --color-text-point-light: var(--accent-purple-500);
    --color-text-point: var(--accent-purple-700);
    --color-text-point-dark: var(--accent-purple-900);
    --color-text-link: var(--accent-blue-900);
    --color-text-link-hover: var(--accent-blue-950);
    --color-text-link-pressed: var(--accent-blue-950);
    --color-text-link-visited: var(--accent-purple-950);

    /* Icon */
    --color-icon-on-subtler: var(--neutral-600);
    --color-icon-on-subtle: var(--neutral-600);
    --color-icon: var(--neutral-500);
    --color-icon-fill: var(--neutral-200);
    --color-icon-inverse: var(--neutral-white);
    --color-icon-disabled: var(--neutral-300);
    --color-icon-disabled-on-subtler: var(--neutral-400);
    --color-icon-disabled-on-subtle: var(--neutral-400);
    --color-icon-primary-on-subtle: var(--brand-primary-700);
    --color-icon-primary: var(--brand-primary-500);
    --color-icon-danger: var(--accent-red-700);
    --color-icon-warning: var(--accent-orange-700);
    --color-icon-success: var(--accent-green-700);
    --color-icon-information: var(--accent-blue-700);
    --color-icon-point: var(--accent-purple-700);

    /* Button */
    --color-button-bg-primary-fill: var(--brand-primary-500);
    --color-button-bg-primary-fill-hover: var(--brand-primary-700);
    --color-button-bg-primary-fill-pressed: var(--brand-primary-700);
    --color-button-bg-primary-fill-active: var(--brand-primary-700);
    --color-button-bg-secondary-fill: var(--neutral-100);
    --color-button-bg-secondary-fill-hover: var(--neutral-200);
    --color-button-bg-secondary-fill-pressed: var(--neutral-200);
    --color-button-border-secondary: var(--neutral-200);
    --color-button-bg-primary-outline: var(--brand-primary-50);
    --color-button-bg-primary-outline-hover: var(--brand-primary-50);
    --color-button-bg-primary-outline-pressed: var(--brand-primary-50);
    --color-button-bg-primary-outline-active: var(--brand-primary-50);
    --color-button-border-primary-outline:  var(--brand-primary-500);
    --color-button-bg-outline: var(--neutral-white);
    --color-button-bg-outline-hover: var(--neutral-50);
    --color-button-bg-outline-pressed: var(--neutral-50);
    --color-button-bg-outline-active: var(--neutral-50);
    --color-button-border-outline: var(--neutral-200);
    --color-button-bg-ghost: transparent;
    --color-button-bg-ghost-hover: var(--neutral-50);
    --color-button-bg-ghost-pressed: var(--neutral-50);
    --color-button-bg-disabled-fill: var(--neutral-300);
    --color-button-border-disabled: var(--neutral-400);

    /* Input */
    --color-input-surface: var(--neutral-white);
    --color-input-surface-disabled: var(--neutral-200);
    --color-input-border: var(--alpha-black-20);
    --color-input-border-primary: var(--brand-primary-500);
    --color-input-border-error: var(--accent-red-500);
    --color-input-border-disabled: var(--alpha-black-20);
    --color-input-text-placeholder: var(--neutral-400);
    --color-input-text: var(--neutral-800);

    /* Progress */
    --color-progress-bg-subtle: var(--neutral-100);
    --color-progress-indicator-primary: var(--brand-primary-500)
}