/* =====================================================================
   Ecom module — DESIGN TOKENS  (SOL baseline, best-read values)
   ---------------------------------------------------------------------
   SINGLE SOURCE OF TRUTH FOR BRAND. Recolor to your own brand by editing
   ONLY this file — nothing else references raw hex.
   Values below are read from the SOL screenshots and are approximate.
   Replace with exact values when available.
   ===================================================================== */
:root {
  /* --- Brand --- */
  --ecom-orange:        #80c018; /*#F4631E;*/   /* primary action / accent (SOL orange) */
  --ecom-orange-dark:   #D9531312; /* hover (placeholder, see -hover below) */
  --ecom-orange-hover:  #80c018e3; /*#DB540F;*/
  --ecom-orange-soft:   #80c01826; /*#FDEDE6;*/   /* tinted backgrounds, decorative blobs */
  --ecom-navy:          #1F2D3D;   /* primary text / dark headings */
  --ecom-ink:           #2B2B2B;   /* body text */
  --ecom-muted:         #7A7A7A;   /* secondary text */

  /* --- Surfaces --- */
  --ecom-bg:            #F5F5F5;   /* page background */
  --ecom-surface:       #FFFFFF;   /* cards / header / inputs */
  --ecom-surface-2:     #FAFAFA;
  --ecom-border:        #E6E6E6;
  --ecom-input-bg:      #EEF1FF;   /* SOL's faint blue input fill */
  --ecom-success:       #2E9E5B;   /* "Default" green pills, active status */
  --ecom-success-soft:  #E4F5EC;
  --ecom-danger:        #E23B3B;

  /* --- Typography --- */
  --ecom-font: "Cairo", "Tajawal", "Segoe UI", system-ui, -apple-system, sans-serif;
  --ecom-fs-base: 15px;
  --ecom-fs-sm:   13px;
  --ecom-fs-lg:   18px;
  --ecom-fs-xl:   24px;
  --ecom-fw-normal: 400;
  --ecom-fw-medium: 600;
  --ecom-fw-bold:   700;

  /* --- Shape & depth --- */
  --ecom-radius:      14px;   /* cards */
  --ecom-radius-pill: 999px;  /* buttons, account pill, search */
  --ecom-radius-sm:   8px;
  --ecom-shadow:      0 2px 10px rgba(0,0,0,.05);
  --ecom-shadow-lg:   0 6px 24px rgba(0,0,0,.08);

  /* --- Layout --- */
  --ecom-header-h:    72px;
  --ecom-sidebar-w:   300px;
  --ecom-container:   1320px;
  --ecom-gap:         20px;
}