@import url("../fonts/euclid-circular-b/");


:root {
    /* Padding Tokens */
    --padding-8: 8px;
    --padding-16: 16px;
    --padding-24: 24px;
    --padding-32: 32px;
    --padding-40: 40px;
    --padding-48: 48px;
    --padding-56: 56px;
    --padding-64: 64px;
    --padding-72: 72px;
    --padding-80: 80px;
    --padding-88: 88px;
    --padding-96: 96px;
    --padding-104: 104px;
    --padding-112: 112px;
    --padding-120: 120px;

    /* Gap Tokens */
    --gap-8: 8px;
    --gap-16: 16px;
    --gap-24: 24px;
    --gap-32: 32px;
    --gap-40: 40px;
    --gap-48: 48px;


    /* Radius Tokens */
    --radius-4: 4px;
    --radius-8: 8px;
    --radius-12: 12px;
    --radius-16: 16px;


    /* font Token Design */
    --font-family: 'Euclid Circular B', sans-serif;

    --font-title-header: bold 24px/150% var(--font-family);
    --font-title-subheader: 600 18px/150% var(--font-family);
    --font-title-divider: 500 16px/150% var(--font-family);

    --font-subtitle-16: 400 16px/150% var(--font-family);
    --font-subtitle-14: 400 14px/150% var(--font-family);
    --font-subtitle-12: 400 12px/150% var(--font-family);

    --font-supporter-12-medium: 500 12px/150% var(--font-family);
    --font-supporter-12-semibold: 600 12px/150% var(--font-family);
    --font-supporter-12-bold: bold 12px/150% var(--font-family);
    --font-supporter-14-medium: 500 14px/150% var(--font-family);
    --font-supporter-14-semibold: 600 14px/150% var(--font-family);
    --font-supporter-14-bold: bold 14px/150% var(--font-family);
    --font-supporter-small: 400 10px/150% var(--font-family);


    /* Color Token design */
    --theme-primary-color: #FF7518;
    --theme-secondary-color: #234C9E;
    --theme-error-color: #FB2929;
    --theme-white-color: #FFFFFF;
    --theme-success-color: #24CB0A;

    --text-primary-color: #171E2D;
    --text-secondary-color: #909090;
    --text-white-color: #FFFFFF;
    --text-colored-color: #FF7518;
    --text-colored-2-color: #234C9E;

    --accent-color-100: #F1F1F1;
    --accent-color-20: #F8F9FA;

    --background-color-100: #F8F9FA;
    --background-color-20: #FBF9F7;

    --icon-primary-color: #464E5F;
    --icon-secondary-color: #8C8C8C;
    --icon-colored-color: #FF7518;
    --icon-white-color: #FFFFFF;

    --stocked-color-100: #DCDCDC;
    --stocked-color-60: #F0F0F0;


}