/** THEME UTILITY DECLARATIONS & CLASSES **/

/* Body */
body {
    color: var(--color-neutral-900);
    font-family: "Open Sans", sans-serif;
}

/* Text Colors */
.text-color-primary-100 { color: var(--color-primary-100); }
.text-color-primary-200 { color: var(--color-primary-200); }
.text-color-primary-300 { color: var(--color-primary-300); }
.text-color-primary-400 { color: var(--color-primary-400); }
.text-color-primary-500 { color: var(--color-primary-500); }
.text-color-primary-600 { color: var(--color-primary-600); }
.text-color-primary-700 { color: var(--color-primary-700); }
.text-color-primary-800 { color: var(--color-primary-800); }
.text-color-primary-900 { color: var(--color-primary-900); }

.text-color-secondary-100 { color: var(--color-secondary-100); }
.text-color-secondary-200 { color: var(--color-secondary-200); }
.text-color-secondary-300 { color: var(--color-secondary-300); }
.text-color-secondary-400 { color: var(--color-secondary-400); }
.text-color-secondary-500 { color: var(--color-secondary-500); }
.text-color-secondary-600 { color: var(--color-secondary-600); }
.text-color-secondary-700 { color: var(--color-secondary-700); }
.text-color-secondary-800 { color: var(--color-secondary-800); }
.text-color-secondary-900 { color: var(--color-secondary-900); }

.text-color-tertiary-100 { color: var(--color-tertiary-100); }
.text-color-tertiary-200 { color: var(--color-tertiary-200); }
.text-color-tertiary-300 { color: var(--color-tertiary-300); }
.text-color-tertiary-400 { color: var(--color-tertiary-400); }
.text-color-tertiary-500 { color: var(--color-tertiary-500); }
.text-color-tertiary-600 { color: var(--color-tertiary-600); }
.text-color-tertiary-700 { color: var(--color-tertiary-700); }
.text-color-tertiary-800 { color: var(--color-tertiary-800); }
.text-color-tertiary-900 { color: var(--color-tertiary-900); }

.text-color-neutral-100 { color: var(--color-neutral-100); }
.text-color-neutral-200 { color: var(--color-neutral-200); }
.text-color-neutral-300 { color: var(--color-neutral-300); }
.text-color-neutral-400 { color: var(--color-neutral-400); }
.text-color-neutral-500 { color: var(--color-neutral-500); }
.text-color-neutral-600 { color: var(--color-neutral-600); }
.text-color-neutral-700 { color: var(--color-neutral-700); }
.text-color-neutral-800 { color: var(--color-neutral-800); }
.text-color-neutral-900 { color: var(--color-neutral-900); }

.text-color-success-400 { color: var(--color-success-400); }
.text-color-success-500 { color: var(--color-success-500); }
.text-color-success-600 { color: var(--color-success-600); }

.text-color-error-400 { color: var(--color-error-400); }
.text-color-error-500 { color: var(--color-error-500); }
.text-color-error-600 { color: var(--color-error-600); }

.text-color-shade-black-5   { color: var(--shade-black-5); }
.text-color-shade-black-10  { color: var(--shade-black-10); }
.text-color-shade-black-15  { color: var(--shade-black-15); }
.text-color-shade-black-20  { color: var(--shade-black-20); }
.text-color-shade-black-60  { color: var(--shade-black-60); }
.text-color-shade-black-70  { color: var(--shade-black-70); }
.text-color-shade-black-80  { color: var(--shade-black-80); }
.text-color-shade-black-90  { color: var(--shade-black-90); }
.text-color-shade-black-100 { color: var(--shade-black-100); }

.text-color-shade-white-5   { color: var(--shade-white-5); }
.text-color-shade-white-10  { color: var(--shade-white-10); }
.text-color-shade-white-15  { color: var(--shade-white-15); }
.text-color-shade-white-20  { color: var(--shade-white-20); }
.text-color-shade-white-60  { color: var(--shade-white-60); }
.text-color-shade-white-70  { color: var(--shade-white-70); }
.text-color-shade-white-80  { color: var(--shade-white-80); }
.text-color-shade-white-90  { color: var(--shade-white-90); }
.text-color-shade-white-100 { color: var(--shade-white-100); }

.text-color-shade-brand-5  { color: var(--shade-brand-5); }
.text-color-shade-brand-10 { color: var(--shade-brand-10); }
.text-color-shade-brand-15 { color: var(--shade-brand-15); }
.text-color-shade-brand-20 { color: var(--shade-brand-20); }
.text-color-shade-brand-25 { color: var(--shade-brand-25); }
.text-color-shade-brand-30 { color: var(--shade-brand-30); }
.text-color-shade-brand-40 { color: var(--shade-brand-40); }
.text-color-shade-brand-50 { color: var(--shade-brand-50); }
.text-color-shade-brand-60 { color: var(--shade-brand-60); }


/* Background Colors */
.bg-color-transparent { background-color: transparent; }

.bg-color-primary-100 { background-color: var(--color-primary-100); }
.bg-color-primary-200 { background-color: var(--color-primary-200); }
.bg-color-primary-300 { background-color: var(--color-primary-300); }
.bg-color-primary-400 { background-color: var(--color-primary-400); }
.bg-color-primary-500 { background-color: var(--color-primary-500); }
.bg-color-primary-600 { background-color: var(--color-primary-600); }
.bg-color-primary-700 { background-color: var(--color-primary-700); }
.bg-color-primary-800 { background-color: var(--color-primary-800); }
.bg-color-primary-900 { background-color: var(--color-primary-900); }

.bg-color-secondary-100 { background-color: var(--color-secondary-100); }
.bg-color-secondary-200 { background-color: var(--color-secondary-200); }
.bg-color-secondary-300 { background-color: var(--color-secondary-300); }
.bg-color-secondary-400 { background-color: var(--color-secondary-400); }
.bg-color-secondary-500 { background-color: var(--color-secondary-500); }
.bg-color-secondary-600 { background-color: var(--color-secondary-600); }
.bg-color-secondary-700 { background-color: var(--color-secondary-700); }
.bg-color-secondary-800 { background-color: var(--color-secondary-800); }
.bg-color-secondary-900 { background-color: var(--color-secondary-900); }

.bg-color-tertiary-100 { background-color: var(--color-tertiary-100); }
.bg-color-tertiary-200 { background-color: var(--color-tertiary-200); }
.bg-color-tertiary-300 { background-color: var(--color-tertiary-300); }
.bg-color-tertiary-400 { background-color: var(--color-tertiary-400); }
.bg-color-tertiary-500 { background-color: var(--color-tertiary-500); }
.bg-color-tertiary-600 { background-color: var(--color-tertiary-600); }
.bg-color-tertiary-700 { background-color: var(--color-tertiary-700); }
.bg-color-tertiary-800 { background-color: var(--color-tertiary-800); }
.bg-color-tertiary-900 { background-color: var(--color-tertiary-900); }

.bg-color-neutral-100 { background-color: var(--color-neutral-100); }
.bg-color-neutral-200 { background-color: var(--color-neutral-200); }
.bg-color-neutral-300 { background-color: var(--color-neutral-300); }
.bg-color-neutral-400 { background-color: var(--color-neutral-400); }
.bg-color-neutral-500 { background-color: var(--color-neutral-500); }
.bg-color-neutral-600 { background-color: var(--color-neutral-600); }
.bg-color-neutral-700 { background-color: var(--color-neutral-700); }
.bg-color-neutral-800 { background-color: var(--color-neutral-800); }
.bg-color-neutral-900 { background-color: var(--color-neutral-900); }

.bg-color-success-400 { background-color: var(--color-success-400); }
.bg-color-success-500 { background-color: var(--color-success-500); }
.bg-color-success-600 { background-color: var(--color-success-600); }

.bg-color-error-400 { background-color: var(--color-error-400); }
.bg-color-error-500 { background-color: var(--color-error-500); }
.bg-color-error-600 { background-color: var(--color-error-600); }

.bg-color-shade-black-5   { background-color: var(--shade-black-5); }
.bg-color-shade-black-10  { background-color: var(--shade-black-10); }
.bg-color-shade-black-15  { background-color: var(--shade-black-15); }
.bg-color-shade-black-20  { background-color: var(--shade-black-20); }
.bg-color-shade-black-60  { background-color: var(--shade-black-60); }
.bg-color-shade-black-70  { background-color: var(--shade-black-70); }
.bg-color-shade-black-80  { background-color: var(--shade-black-80); }
.bg-color-shade-black-90  { background-color: var(--shade-black-90); }
.bg-color-shade-black-100 { background-color: var(--shade-black-100); }

.bg-color-shade-white-5   { background-color: var(--shade-white-5); }
.bg-color-shade-white-10  { background-color: var(--shade-white-10); }
.bg-color-shade-white-15  { background-color: var(--shade-white-15); }
.bg-color-shade-white-20  { background-color: var(--shade-white-20); }
.bg-color-shade-white-60  { background-color: var(--shade-white-60); }
.bg-color-shade-white-70  { background-color: var(--shade-white-70); }
.bg-color-shade-white-80  { background-color: var(--shade-white-80); }
.bg-color-shade-white-90  { background-color: var(--shade-white-90); }
.bg-color-shade-white-100 { background-color: var(--shade-white-100); }

.bg-color-shade-brand-5  { background-color: var(--shade-brand-5); }
.bg-color-shade-brand-10 { background-color: var(--shade-brand-10); }
.bg-color-shade-brand-15 { background-color: var(--shade-brand-15); }
.bg-color-shade-brand-20 { background-color: var(--shade-brand-20); }
.bg-color-shade-brand-25 { background-color: var(--shade-brand-25); }
.bg-color-shade-brand-30 { background-color: var(--shade-brand-30); }
.bg-color-shade-brand-40 { background-color: var(--shade-brand-40); }
.bg-color-shade-brand-50 { background-color: var(--shade-brand-50); }
.bg-color-shade-brand-60 { background-color: var(--shade-brand-60); }


/* Font Weight */
.font-weight-light    { font-weight: var(--font-weight-light); }
.font-weight-regular  { font-weight: var(--font-weight-regular); }
.font-weight-semibold { font-weight: var(--font-weight-semibold); }
.font-weight-bold     { font-weight: var(--font-weight-bold); }


/* Font Size */
.font-size-10 { font-size: var(--font-size-10); }
.font-size-12 { font-size: var(--font-size-12); }
.font-size-14 { font-size: var(--font-size-14); }
.font-size-16 { font-size: var(--font-size-16); }
.font-size-18 { font-size: var(--font-size-18); }
.font-size-20 { font-size: var(--font-size-20); }


/* Font Style */
.font-style-italic { font-style: italic; }


/* Radii */
.border-radius-sm { border-radius: var(--border-radius-sm); }
.border-radius-md { border-radius: var(--border-radius-md); }


/* Shadows */
.shadow-img {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16);
}