/*=========================================================
  Electronic Jacquard Sales & Services
  File : variables.css
  Version : 1.0.0
  Description : Global Design Tokens
=========================================================*/

:root{

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

--clr-primary:#0057B8;
--clr-primary-dark:#003D82;
--clr-primary-light:#4A90E2;

--clr-secondary:#08111F;

--clr-accent:#FF9F1C;

--clr-success:#00C853;

--clr-danger:#E53935;

--clr-warning:#FFC107;

--clr-info:#00BCD4;


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

--bg-body:#F5F7FA;

--bg-section:#EEF3F9;

--bg-card:#FFFFFF;

--bg-dark:#08111F;

--bg-footer:#050B15;

--bg-overlay:rgba(0,0,0,.65);


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

--text-dark:#1B263B;

--text-light:#F8FAFC;

--text-muted:#6C757D;

--text-gray:#8B95A7;


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

--border:#E4E7EC;

--border-light:#F2F4F7;

--border-dark:#0B162A;


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

--font-heading:'Montserrat',sans-serif;

--font-body:'Poppins',sans-serif;

--font-number:'Oswald',sans-serif;


/*=========================================================
  FONT SIZES
=========================================================*/

--fs-12:.75rem;
--fs-14:.875rem;
--fs-16:1rem;
--fs-18:1.125rem;
--fs-20:1.25rem;
--fs-24:1.5rem;
--fs-28:1.75rem;
--fs-32:2rem;
--fs-40:2.5rem;
--fs-48:3rem;
--fs-56:3.5rem;
--fs-64:4rem;


/*=========================================================
  FONT WEIGHTS
=========================================================*/

--fw-light:300;

--fw-normal:400;

--fw-medium:500;

--fw-semibold:600;

--fw-bold:700;

--fw-black:800;


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

--lh-small:1.2;

--lh-normal:1.6;

--lh-large:1.8;


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

--space-4:4px;

--space-8:8px;

--space-12:12px;

--space-16:16px;

--space-20:20px;

--space-24:24px;

--space-32:32px;

--space-40:40px;

--space-48:48px;

--space-64:64px;

--space-80:80px;

--space-96:96px;

--space-120:120px;


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

--radius-xs:4px;

--radius-sm:8px;

--radius-md:12px;

--radius-lg:18px;

--radius-xl:24px;

--radius-round:999px;


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

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

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

--shadow-lg:
0 20px 50px rgba(0,0,0,.15);

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

--shadow-primary:
0 12px 30px rgba(0,87,184,.25);


/*=========================================================
  GLASS EFFECT
=========================================================*/

--glass-bg:
rgba(255,255,255,.12);

--glass-border:
rgba(255,255,255,.18);

--glass-blur:
blur(14px);


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

--transition-fast:.25s ease;

--transition:.35s ease;

--transition-slow:.6s ease;


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

--z-loader:99999;

--z-navbar:999;

--z-dropdown:998;

--z-overlay:997;

--z-modal:996;

--z-fixed:995;


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

--container:1320px;


/*=========================================================
  GRADIENTS
=========================================================*/

--gradient-primary:
linear-gradient(
135deg,
#0057B8,
#2B86F5
);

--gradient-dark:
linear-gradient(
135deg,
#08111F,
#152238
);

--gradient-orange:
linear-gradient(
135deg,
#FF9F1C,
#FFB84D
);

--gradient-success:
linear-gradient(
135deg,
#00C853,
#34D058
);


/*=========================================================
  HEADER
=========================================================*/

--header-height:90px;


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

--btn-height:52px;

--btn-radius:12px;

}


/*=========================================================
  DARK MODE VARIABLES
=========================================================*/

html[data-theme="dark"]{

--bg-body:#08111F;

--bg-section:#0C1729;

--bg-card:#101E34;

--bg-footer:#050B15;

--text-dark:#F5F7FA;

--text-muted:#D7DDE7;

--border:#26374E;

--shadow-md:
0 12px 40px rgba(0,0,0,.45);

}