:root {
    /* Mode 1 */
    /* color */
    --color-accent-almond: #f3ded0;
    --color-accent-barley-white: #faefca;
    --color-accent-botticelli: #cee6f2;
    --color-accent-french-lilac: #f0c7ff;
    --color-accent-melrose: #c5c0f9;
    --color-accent-peach-schnapps: #ffd8ce;
    --color-accent-periwinkle-gray: #cdd7fa;
    --color-accent-swans-down: #d4e9e9;
    --color-accent-vanilla-ice: #f9dddf;
    --color-feedback-error-100: #f7e7e7;
    --color-feedback-error-200: #edc3c3;
    --color-feedback-error-300: #deadad;
    --color-feedback-error-400: #962828;
    --color-feedback-error-500: #700000;
    --color-feedback-error-600: #5c0000;
    --color-feedback-info-100: #e7eff7;
    --color-feedback-info-200: #c3d8ed;
    --color-feedback-info-300: #285f96;
    --color-feedback-info-400: #003870;
    --color-feedback-success-100: #e7f7ea;
    --color-feedback-success-200: #c3edcc;
    --color-feedback-success-300: #289640;
    --color-feedback-success-400: #007018;
    --color-feedback-warning-100: #f7f2e7;
    --color-feedback-warning-200: #eddfc3;
    --color-feedback-warning-300: #b58524;
    --color-feedback-warning-400: #a87000;
    --color-neutral-grey-100: #ffffff;
    --color-neutral-grey-200: #f7f9fa;
    --color-neutral-grey-300: #edf0f2;
    --color-neutral-grey-400: #bcc6d0;
    --color-neutral-grey-500: #30475e;
    --color-neutral-grey-600: #293c4f;
    --color-neutral-grey-700: #24313d;
    --color-neutral-grey-800: #192129;
    --color-primary-pickled-bluewood-100: #f2f6fa;
    --color-primary-pickled-bluewood-200: #e9f0f7;
    --color-primary-pickled-bluewood-300: #d0deeb;
    --color-primary-pickled-bluewood-400: #30475e;
    --color-primary-pickled-bluewood-500: #20364d;
    --color-primary-pickled-bluewood-600: #182b3d;
    --color-primary-roman-100: #faf2f3;
    --color-primary-roman-200: #f7e9e9;
    --color-primary-roman-300: #f2dcdd;
    --color-primary-roman-400: #e84e50;
    --color-primary-roman-500: #d63a3c;
    --color-primary-roman-600: #bf3032;
    --color-secondary-grandis-100: #faf7f2;
    --color-secondary-grandis-200: #f7f2e9;
    --color-secondary-grandis-300: #f2eadc;
    --color-secondary-grandis-400: #ffc261;
    --color-secondary-grandis-500: #edb253;
    --color-secondary-grandis-600: #d99e3f;
    /* number */
    --radius-xs: 0.25rem;
    --radius-sm: 0.75rem;
    --radius-md: 1.125rem;
    --radius-lg: 2rem;
    --radius-xl: 3rem;
    --radius-2xl: 4.5rem;
    --radius-3xl: 62.4375rem;
}

:root {
    /* Mode 1 */
    /* color */
    --background-color-buttons-button-brand: var(--color-primary-roman-400);
    --background-color-buttons-button-brand-hover: var(--color-primary-roman-600);
    --background-color-buttons-button-confirmative: var(--color-feedback-success-300);
    --background-color-buttons-button-confirmative-hover: var(--color-feedback-success-400);
    --background-color-buttons-button-darkmode: var(--color-white-opacity-white-5);
    --background-color-buttons-button-darkmode-hover: var(--color-white-opacity-white-10);
    --background-color-buttons-button-disabled: var(--color-neutral-grey-300);
    --background-color-buttons-button-primary: var(--color-primary-pickled-bluewood-500);
    --background-color-buttons-button-primary-hover: var(--color-primary-pickled-bluewood-600);
    --background-color-buttons-button-secondary: var(--color-neutral-grey-300);
    --background-color-buttons-button-secondary-hover: var(--color-neutral-grey-400);
    --background-color-buttons-button-white: var(--color-neutral-grey-100);
    --background-color-buttons-button-white-hover: var(--color-neutral-grey-200);
    --background-color-inputs-input: var(--color-neutral-grey-200);
    --background-color-inputs-input-disabled: var(--color-gray-100d);
    --background-color-inputs-input-hover: var(--color-neutral-grey-200);
    --background-color-surface-brand: var(--color-primary-pickled-bluewood-200);
    --background-color-surface-invert: var(--color-neutral-grey-700);
    --background-color-surface-primary: var(--color-neutral-grey-200);
    --background-color-surface-secondary: var(--color-neutral-grey-100);
    --background-color-surface-tertiary: var(--color-neutral-grey-300);
    --border-border-brand: var(--color-primary-pickled-bluewood-600);
    --border-border-link-disabled: var(--color-neutral-grey-500);
    --border-border-link-primary: var(--color-pickled-bluewood-800i);
    --border-border-link-primary-hover: var(--color-pickled-bluewood-900);
    --border-border-primary: var(--color-neutral-grey-300);
    --border-border-secondary: var(--color-neutral-grey-400);
    --icons-icon-brand: var(--color-primary-roman-400);
    --icons-icon-disabled: var(--color-neutral-grey-600);
    --icons-icon-error: var(--color-feedback-error-600);
    --icons-icon-invert: var(--color-neutral-grey-100);
    --icons-icon-link-primary: var(--color-primary-roman-400);
    --icons-icon-link-primary-hover: var(--color-primary-roman-600);
    --icons-icon-link-secondary: var(--color-pickled-bluewood-800i);
    --icons-icon-link-secondary-hover: var(--color-primary-pickled-bluewood-500);
    --icons-icon-primary: var(--color-neutral-grey-800);
    --icons-icon-secondary: var(--color-neutral-grey-500);
    --icons-icon-success: var(--color-feedback-success-400);
    --text-color-body-brand: var(--color-primary-roman-400);
    --text-color-body-disabled: var(--color-neutral-grey-400);
    --text-color-body-error: var(--color-feedback-error-400);
    --text-color-body-invert: var(--color-neutral-grey-100);
    --text-color-body-link-primary: var(--color-primary-roman-400);
    --text-color-body-link-primary-hover: var(--color-primary-roman-600);
    --text-color-body-link-secondary: var(--color-primary-pickled-bluewood-400);
    --text-color-body-link-secondary-hover: var(--color-primary-pickled-bluewood-500);
    --text-color-body-placeholder: var(--color-neutral-grey-400);
    --text-color-body-primary: var(--color-neutral-grey-800);
    --text-color-body-secondary: var(--color-neutral-grey-500);
    --text-color-body-sucess: var(--color-feedback-success-400);
    --text-color-title-brand: var(--color-primary-roman-400);
    --text-color-title-disabled: var(--color-neutral-grey-400);
    --text-color-title-invert: var(--color-neutral-grey-100);
    --text-color-title-primary: var(--color-neutral-grey-800);
    --text-color-title-secondary: var(--color-primary-pickled-bluewood-500);
    --text-color-title-tertiary: var(--color-neutral-grey-400);
    /* number */
    --radius-radius-atom: var(--radius-xs);
    --radius-radius-miniature: var(--radius-sm);
    --radius-radius-table: var(--radius-md);
    --radius-radius-textarea: var(--radius-md);
    --radius-radius-img: var(--radius-lg);
    --radius-radius-tile: var(--radius-lg);
    --radius-radius-badge: var(--radius-3xl);
    --radius-radius-button: var(--radius-3xl);
    --radius-radius-input: var(--radius-3xl);

    /* Customs */
    --padding-auth-pages: 24px 40px;
    --margin-top-pages: 56px;
}

/* Typography */
:root {
    /* desktop */
    /* number */
    --font-line-height-xs: 1.125rem;
    --font-line-height-sm: 1.25rem;
    --font-line-height-md: 1.5rem;
    --font-line-height-lg: 1.75rem;
    --font-line-height-h5: 1.875rem;
    --font-line-height-h4: 2rem;
    --font-line-height-h3: 2.375rem;
    --font-line-height-h2: 2.75rem;
    --font-line-height-h1: 3.75rem;
    --font-line-height-xl: 4.5rem;
    --font-line-height-2xl: 5.625rem;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-h5: 1.25rem;
    --font-size-h4: 1.5rem;
    --font-size-h3: 1.875rem;
    --font-size-h2: 2.25rem;
    --font-size-h1: 3rem;
    --font-size-xl: 3.75rem;
    --font-size-2xl: 4.5rem;
    /* string */
    --font-family-body: "Source sans pro";
    --font-family-title: "Oswald";
    --font-weight-bold: Bold;
    --font-weight-light: Light;
    --font-weight-medium: Medium;
    --font-weight-regular: Regular;
    --font-weight-semibold: Semibold;
}

@media screen and (max-width: 767px) {
    :root {
        /* mobile */
        /* number */
        --font-line-height-xs: 1.125rem;
        --font-line-height-sm: 1.25rem;
        --font-line-height-md: 1.5rem;
        --font-line-height-lg: 1.625rem;
        --font-line-height-h4: 1.75rem;
        --font-line-height-h5: 1.75rem;
        --font-line-height-h3: 2.125rem;
        --font-line-height-h2: 2.5rem;
        --font-line-height-h1: 2.75rem;
        --font-line-height-xl: 3rem;
        --font-line-height-2xl: 3.5rem;
        --font-size-xs: 0.75rem;
        --font-size-sm: 0.875rem;
        --font-size-md: 1rem;
        --font-size-lg: 1.125rem;
        --font-size-h5: 1.25rem;
        --font-size-h4: 1.375rem;
        --font-size-h3: 1.625rem;
        --font-size-h2: 2rem;
        --font-size-h1: 2.25rem;
        --font-size-xl: 2.5rem;
        --font-size-2xl: 3rem;
        /* string */
        --font-family-body: source sans pro;
        --font-family-title: oswald;
        --font-weight-bold: Bold;
        --font-weight-light: Light;
        --font-weight-medium: Medium;
        --font-weight-regular: Regular;
        --font-weight-semibold: Semibold;
    }
}