/*==========================================================
    Emirates Online Visa Design System
    Design Tokens v1.0
==========================================================*/

:root{

/*==========================================================
    BRAND COLORS
==========================================================*/

--eov-primary:#8B1E2D;
--eov-primary-hover:#741926;

--eov-secondary:#1B1B1F;

--eov-heading:#171717;

--eov-text:#5C5C66;

--eov-text-light:#777777;

--eov-white:#FFFFFF;

--eov-background:#FAFAFA;

--eov-card:#FFFFFF;

--eov-border:#E9E9EC;

--eov-success:#1F9D55;

--eov-warning:#F59E0B;

--eov-danger:#DC2626;


/*==========================================================
    TYPOGRAPHY
==========================================================*/

--eov-font-primary:"Inter",sans-serif;

--eov-font-secondary:"Inter",sans-serif;

--eov-font-weight-light:300;

--eov-font-weight-regular:400;

--eov-font-weight-medium:500;

--eov-font-weight-semibold:600;

--eov-font-weight-bold:700;

--eov-font-weight-extrabold:800;


/*==========================================================
    FONT SIZE
==========================================================*/

--eov-fs-xs:12px;

--eov-fs-sm:14px;

--eov-fs-base:16px;

--eov-fs-lg:18px;

--eov-fs-xl:20px;

--eov-h6:20px;

--eov-h5:24px;

--eov-h4:30px;

--eov-h3:36px;

--eov-h2:44px;

--eov-h1:56px;


/*==========================================================
    LINE HEIGHT
==========================================================*/

--eov-line-xs:1.4;

--eov-line-sm:1.5;

--eov-line-base:1.8;

--eov-line-heading:1.2;


/*==========================================================
    LETTER SPACING
==========================================================*/

--eov-letter-tight:-1px;

--eov-letter-normal:0;

--eov-letter-wide:.2px;


/*==========================================================
    CONTAINER
==========================================================*/

--eov-container:1320px;

--eov-container-wide:1440px;


/*==========================================================
    SECTION SPACING
==========================================================*/

--eov-section-xl:140px;

--eov-section-lg:120px;

--eov-section-md:90px;

--eov-section-sm:70px;


/*==========================================================
    CONTENT SPACING
==========================================================*/

--eov-space-4:4px;

--eov-space-8:8px;

--eov-space-12:12px;

--eov-space-16:16px;

--eov-space-20:20px;

--eov-space-24:24px;

--eov-space-32:32px;

--eov-space-40:40px;

--eov-space-48:48px;

--eov-space-56:56px;

--eov-space-64:64px;

--eov-space-80:80px;

--eov-space-100:100px;


/*==========================================================
    BORDER RADIUS
==========================================================*/

--eov-radius-sm:8px;

--eov-radius-md:10px;

--eov-radius-lg:12px;

--eov-radius-xl:16px;

--eov-radius-pill:999px;


/*==========================================================
    BORDER
==========================================================*/

--eov-border-width:1px;

--eov-border-style:solid;

--eov-border-color:var(--eov-border);


/*==========================================================
    SHADOWS
==========================================================*/

--eov-shadow-xs:
0 2px 8px rgba(0,0,0,.04);

--eov-shadow-sm:
0 4px 12px rgba(0,0,0,.06);

--eov-shadow-md:
0 10px 30px rgba(0,0,0,.08);

--eov-shadow-lg:
0 20px 60px rgba(0,0,0,.12);

--eov-shadow-xl:
0 30px 80px rgba(0,0,0,.16);


/*==========================================================
    BUTTONS
==========================================================*/

--eov-btn-height:54px;

--eov-btn-padding-y:16px;

--eov-btn-padding-x:28px;

--eov-btn-radius:12px;


/*==========================================================
    FORMS
==========================================================*/

--eov-input-height:54px;

--eov-input-radius:10px;

--eov-input-border:#E9E9EC;

--eov-input-focus:#8B1E2D;

--eov-placeholder:#999999;


/*==========================================================
    CARD
==========================================================*/

--eov-card-padding:32px;

--eov-card-radius:16px;


/*==========================================================
    ICONS
==========================================================*/

--eov-icon-sm:18px;

--eov-icon-md:22px;

--eov-icon-lg:28px;


/*==========================================================
    TRANSITIONS
==========================================================*/

--eov-transition-fast:.2s ease;

--eov-transition:.3s ease;

--eov-transition-slow:.5s ease;


/*==========================================================
    Z INDEX
==========================================================*/

--eov-z-dropdown:100;

--eov-z-sticky:200;

--eov-z-fixed:300;

--eov-z-modal:999;

}


/*==========================================================
    RESPONSIVE TOKENS
==========================================================*/

@media (max-width:1024px){

:root{

--eov-h1:44px;

--eov-h2:36px;

--eov-h3:30px;

--eov-h4:26px;

--eov-h5:22px;

--eov-h6:18px;

--eov-section-lg:90px;

}

}

@media (max-width:767px){

:root{

--eov-h1:36px;

--eov-h2:30px;

--eov-h3:26px;

--eov-h4:22px;

--eov-h5:20px;

--eov-h6:18px;

--eov-fs-base:15px;

--eov-section-lg:70px;

--eov-card-padding:24px;

}

}