:root {
    font-family: "LtSaeada", sans-serif;
    /** Sizes **/
    --max-width: 1536px;
    --navbar-height: 64px;

    /** Icons **/
    --icon-select-arrow: url("/icons/arrow-down.svg");
    --icon-input-calendar: url("/icons/calendar.svg");

    /** Color Background **/
    --color-background: #ffffff;
    --color-onBackground: #000000;

    /** Color Primary **/
    --color-primary: #ffb31a;
    --color-primary-50: #fffaeb;
    --color-primary-100: #fff1c6;
    --color-primary-200: #ffe188;
    --color-primary-300: #ffcb4a;
    --color-primary-400: #ffb31a;
    --color-primary-500: #f99207;
    --color-primary-600: #dd6b02;
    --color-primary-700: #b74a06;
    --color-primary-800: #94380c;
    --color-primary-900: #7a2e0d;
    --color-primary-950: #461602;
    --color-primary-hsl-part: 40, 100%;
    --color-primary-hsl: var(--color-primary-hsl-part), 55%;
    --color-primary-background-gradient: linear-gradient(
        90deg,
        var(--color-primary-500),
        var(--color-primary-400)
    );
    --color-onPrimary: #ffffff;
    --color-onPrimary-hsl-part: 0, 0%;
    --color-onPrimary-hsl: var(--color-onPrimary-hsl-part), 100%;

    /** Color Secondary **/
    --color-secondary: #1a2d60;
    --color-secondary-50: #eff7ff;
    --color-secondary-100: #dbebfe;
    --color-secondary-200: #bfdefe;
    --color-secondary-300: #93c9fd;
    --color-secondary-400: #60abfa;
    --color-secondary-500: #3a8af7;
    --color-secondary-600: #246bec;
    --color-secondary-700: #1c56d9;
    --color-secondary-800: #1e46af;
    --color-secondary-900: #1e3f8a;
    --color-secondary-950: #1a2d60;
    --color-secondary-hsl-part: 224, 57%;
    --color-secondary-hsl: var(--color-secondary-hsl-part), 24%;
    --color-secondary-background-gradient: linear-gradient(
        90deg,
        hsl(var(--color-secondary-hsl-part), 40%) 0%,
        hsl(var(--color-secondary-hsl-part), 24%) 65%
    );
    --color-secondary-background-gradient-medium: linear-gradient(
        90deg,
        hsl(var(--color-secondary-hsl-part), 40%) 0%,
        hsl(var(--color-secondary-hsl-part), 34%) 75%
    );
    --color-onSecondary: #ffffff;
    --color-onSecondary-hsl-part: 0, 0%;
    --color-onSecondary-hsl: var(--color-onSecondary-hsl-part), 100%;

    /** Color Error **/
    --color-error: #b91c1c;
    --color-error-50: #fef2f2;
    --color-error-100: #fee2e2;
    --color-error-200: #fecaca;
    --color-error-300: #fca5a5;
    --color-error-400: #f87171;
    --color-error-500: #ef4444;
    --color-error-600: #dc2626;
    --color-error-700: #b91c1c;
    --color-error-800: #991b1b;
    --color-error-900: #7f1d1d;
    --color-error-950: #450a0a;
    --color-error-hsl-part: 0, 74%;
    --color-error-hsl: var(--color-error-hsl-part), 42%;
    --color-onError: #ffffff;
    --color-onError-hsl-part: 0, 0%;
    --color-onError-hsl: var(--color-onError-hsl-part), 100%;

    /** Color Warning **/
    --color-warning: #ff6900;
    --color-warning-50: #fff8ec;
    --color-warning-100: #fff0d3;
    --color-warning-200: #ffdda5;
    --color-warning-300: #ffc46d;
    --color-warning-400: #ff9f32;
    --color-warning-500: #ff820a;
    --color-warning-600: #ff6900;
    --color-warning-700: #cc4b02;
    --color-warning-800: #a13a0b;
    --color-warning-900: #82320c;
    --color-warning-950: #461704;
    --color-warning-hsl-part: 25, 100%;
    --color-warning-hsl: var(--color-warning-hsl-part), 50%;
    --color-onWarning: #ffffff;
    --color-onWarning-hsl-part: 0, 0%;
    --color-onWarning-hsl: var(--color-onWarning-hsl-part), 100%;

    /** Color Success **/
    --color-success: #00c950;
    --color-success-50: #eefff3;
    --color-success-100: #d7ffe6;
    --color-success-200: #b2ffcf;
    --color-success-300: #76ffab;
    --color-success-400: #33f580;
    --color-success-500: #09de5d;
    --color-success-600: #00c950;
    --color-success-700: #04913d;
    --color-success-800: #0a7134;
    --color-success-900: #0a5d2d;
    --color-success-950: #003417;
    --color-success-hsl-part: 144, 100%;
    --color-success-hsl: var(--color-success-hsl-part), 39%;
    --color-onSuccess: #ffffff;
    --color-onSuccess-hsl-part: 0, 0%;
    --color-onSuccess-hsl: var(--color-onSuccess-hsl-part), 100%;

    /** Color Gray **/
    --color-gray-50: #f9fafb;
    --color-gray-100: #f3f4f6;
    --color-gray-200: #e5e7eb;
    --color-gray-300: #d1d5db;
    --color-gray-400: #99a1af;
    --color-gray-500: #6a7282;
    --color-gray-600: #4a5565;
    --color-gray-700: #364153;
    --color-gray-800: #1e2939;
    --color-gray-900: #101828;
    --color-gray-950: #030712;

    /** Box Shadow **/
    --box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
}