/* ==========================================
   Firouze Design System
   Version 1.0
========================================== */

:root{

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

/* Brand Colors */

--color-primary:        #00a29d;   /* Firouze */
--color-primary-hover:  #00867f;

--color-secondary:      #002846;   /* Navy */
--color-secondary-hover:#001d33;

--color-orange:         #f25c2f;
--color-orange-hover:   #db4c20;

--color-gold:           #dfac1d;
--color-gold-hover:     #c89614;

/* Neutral Colors */

--color-text:           #58595b;
--color-gray-dark:      #231f20;
--color-gray-light:     #d3d3d3;

--color-white:          #ffffff;
--color-black:          #000000;

--color-border:         #e6e6e6;
--color-background:     #ffffff;


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

--font-fa:"IRANYekanX","IRANYekan","Tahoma",sans-serif;
--font-en:"Poppins","Arial",sans-serif;

--fs-h1:48px;
--fs-h2:36px;
--fs-h3:30px;
--fs-h4:24px;

--fs-body:18px;
--fs-small:15px;
--fs-caption:12px;

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

--space-xs:6px;
--space-sm:10px;
--space-md:16px;
--space-lg:24px;
--space-xl:32px;
--space-2xl:48px;
--space-3xl:64px;
--space-4xl:96px;


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

--radius-sm:4px;
--radius-md:8px;
--radius-lg:12px;
--radius-xl:16px;


/*==============================
=            SHADOW            =
==============================*/

--shadow-sm:0 3px 8px rgba(0,0,0,.05);

--shadow-md:0 8px 20px rgba(0,0,0,.08);

--shadow-lg:0 12px 30px rgba(0,0,0,.12);


/*==============================
=          TRANSITION          =
==============================*/

--transition-fast:.2s ease;

--transition:.3s ease;

--transition-slow:.45s ease;


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

--container-width:1320px;


/* Surface Colors */

--color-surface:        #f3f8fc;
--color-surface-light:  #fafbfd;

/* Overlay */

--color-overlay:rgba(0,0,0,.35);
}