/* ============================================================
   VARIABLES.CSS — Design Tokens
   Project  : EV Technologies
   Reference: soles.orfactor.com (Solar Energy theme)
   Scope    : Global — imported by all CSS files
   ============================================================ */

:root {

  /* ----------------------------------------------------------
     COLORS — Brand Palette
  ---------------------------------------------------------- */

  /* Primary / Background */
  --color-bg-dark        : #0b1d35;   /* deep navy — main dark background */
  --color-bg-darker      : #071528;   /* deeper navy — footer, overlays */
  --color-bg-section     : #0f2545;   /* mid navy — alternate sections */
  --color-bg-card        : #122040;   /* card background dark */
  --color-bg-light       : #f5f7fa;   /* light section background */
  --color-bg-white       : #ffffff;

  /* Accent — Brand Green */
  --color-accent         : #84c225;   /* primary lime-green accent */
  --color-accent-dark    : #6aab10;   /* hover / pressed state */
  --color-accent-light   : #a8da52;   /* lighter tint for highlights */
  --color-accent-bg      : rgba(132, 194, 37, 0.10); /* subtle green bg tint */

  /* Text */
  --color-text-primary   : #ffffff;   /* headings on dark bg */
  --color-text-body      : #c5d0e4;   /* body / paragraph on dark */
  --color-text-muted     : #8a9bb5;   /* captions, meta text */
  --color-text-dark      : #0b1d35;   /* text on light backgrounds */
  --color-text-heading-light: #1a2e4a; /* headings on light sections */

  /* Borders & Dividers */
  --color-border         : rgba(255, 255, 255, 0.10);
  --color-border-accent  : rgba(132, 194, 37, 0.40);

  /* States */
  --color-success        : #84c225;
  --color-error          : #e74c3c;
  --color-warning        : #f39c12;

  /* Overlays */
  --color-overlay-dark   : rgba(7, 21, 40, 0.75);
  --color-overlay-darker : rgba(7, 21, 40, 0.90);


  /* ----------------------------------------------------------
     TYPOGRAPHY — Font Family
  ---------------------------------------------------------- */

  --font-primary   : 'Jost', sans-serif;     /* headings — matches reference */
  --font-secondary : 'Poppins', sans-serif;  /* body, UI elements */


  /* ----------------------------------------------------------
     TYPOGRAPHY — Font Sizes (fluid scale)
  ---------------------------------------------------------- */

  --fs-xs    : 0.75rem;    /*  12px */
  --fs-sm    : 0.875rem;   /*  14px */
  --fs-base  : 1rem;       /*  16px */
  --fs-md    : 1.125rem;   /*  18px */
  --fs-lg    : 1.25rem;    /*  20px */
  --fs-xl    : 1.5rem;     /*  24px */
  --fs-2xl   : 1.875rem;   /*  30px */
  --fs-3xl   : 2.25rem;    /*  36px */
  --fs-4xl   : 2.75rem;    /*  44px */
  --fs-5xl   : 3.5rem;     /*  56px */
  --fs-6xl   : 4.5rem;     /*  72px */


  /* ----------------------------------------------------------
     TYPOGRAPHY — Font Weights
  ---------------------------------------------------------- */

  --fw-light     : 300;
  --fw-regular   : 400;
  --fw-medium    : 500;
  --fw-semibold  : 600;
  --fw-bold      : 700;
  --fw-extrabold : 800;


  /* ----------------------------------------------------------
     TYPOGRAPHY — Line Heights
  ---------------------------------------------------------- */

  --lh-tight   : 1.2;
  --lh-snug    : 1.35;
  --lh-normal  : 1.6;
  --lh-relaxed : 1.75;
  --lh-loose   : 2;


  /* ----------------------------------------------------------
     TYPOGRAPHY — Letter Spacing
  ---------------------------------------------------------- */

  --ls-tight  : -0.02em;
  --ls-normal : 0em;
  --ls-wide   : 0.05em;
  --ls-wider  : 0.10em;
  --ls-widest : 0.15em;


  /* ----------------------------------------------------------
     SPACING — Base scale (multiples of 4px)
  ---------------------------------------------------------- */

  --sp-1  : 0.25rem;   /*  4px */
  --sp-2  : 0.5rem;    /*  8px */
  --sp-3  : 0.75rem;   /* 12px */
  --sp-4  : 1rem;      /* 16px */
  --sp-5  : 1.25rem;   /* 20px */
  --sp-6  : 1.5rem;    /* 24px */
  --sp-8  : 2rem;      /* 32px */
  --sp-10 : 2.5rem;    /* 40px */
  --sp-12 : 3rem;      /* 48px */
  --sp-16 : 4rem;      /* 64px */
  --sp-20 : 5rem;      /* 80px */
  --sp-24 : 6rem;      /* 96px */
  --sp-32 : 8rem;      /* 128px */


  /* ----------------------------------------------------------
     LAYOUT
  ---------------------------------------------------------- */

  --container-max   : 1280px;
  --container-px    : 0.5rem;     /* horizontal padding on container */
  --section-py      : 5rem;       /* default section vertical padding */
  --section-py-sm   : 3rem;       /* smaller section padding */


  /* ----------------------------------------------------------
     BORDER RADIUS
  ---------------------------------------------------------- */

--radius-sm   : 0.25rem;   /*  4px */
--radius-md   : 0.5rem;    /*  8px */
--radius-lg   : 0.75rem;   /* 12px */
--radius-xl   : 1rem;      /* 16px */
--radius-2xl  : 1.5rem;    /* 24px */
--radius-pill : 62.4375rem; /* 999px */


  /* ----------------------------------------------------------
     SHADOWS
  ---------------------------------------------------------- */

  --shadow-sm   : 0 2px 8px rgba(0, 0, 0, 0.12);
  --shadow-md   : 0 4px 20px rgba(0, 0, 0, 0.20);
  --shadow-lg   : 0 8px 40px rgba(0, 0, 0, 0.30);
  --shadow-card : 0 6px 30px rgba(0, 0, 0, 0.25);
  --shadow-accent: 0 4px 20px rgba(132, 194, 37, 0.30);


  /* ----------------------------------------------------------
     TRANSITIONS
  ---------------------------------------------------------- */

  --transition-fast   : 0.2s ease;
  --transition-base   : 0.3s ease;
  --transition-slow   : 0.5s ease;


  /* ----------------------------------------------------------
     Z-INDEX SCALE
  ---------------------------------------------------------- */

  --z-base     : 1;
  --z-dropdown : 100;
  --z-sticky   : 200;
  --z-overlay  : 300;
  --z-modal    : 400;
  --z-toast    : 500;

}


/* ============================================================
   DARK MODE — Overrides (matches base dark theme by default,
   light mode overrides if ever needed)
   ============================================================ */

@media (prefers-color-scheme: dark) {
  :root {
    /* Already dark by default — no overrides needed.
       If a light mode is added later, swap tokens here. */
  }
}