/* =========================================================================
   EconoPlus — Design Tokens
   The single source of truth for brand colour, type, spacing, radius,
   elevation and motion. Never hard-code a brand value outside this file.
   ========================================================================= */

:root {
  /* ---- Brand colour (do not improvise new brand colours) ---------------- */
  --ep-red:        #FF1E26;   /* EconoPlus Red — primary actions, badges, accents */
  --ep-charcoal:   #1F1F23;   /* Charcoal Black — text, secondary buttons, footer */
  --ep-white:      #FFFFFF;   /* White — backgrounds, cards */
  --ep-gray:       #F5F5F7;   /* Light Gray — section backgrounds, subtle fills */

  /* ---- Derived supporting neutrals (only these) ------------------------- */
  --ep-gray-200:   #E8E8ED;   /* borders, dividers */
  --ep-gray-500:   #6E6E73;   /* muted / secondary text */
  --ep-red-soft:   #FFF0F0;   /* tint behind red elements */
  /* The brand red is 3.84:1 on white — below the 4.5:1 that WCAG AA requires
     for text. That is fine for a logo or a large decorative fill, and not fine
     for a button label or a link, which is most of where it was used. This is
     the same hue (358°) darkened until it clears AA on both white (5.03) and
     #F5F5F7 (4.62). Use it wherever red CARRIES TEXT or sits behind white
     text; --ep-red stays the brand colour for decoration and large display. */
  --ep-red-ink:    #E00008;
  /* #6E6E73 is 5.07:1 on white and only 3.24:1 on the charcoal band — one
     token cannot serve both grounds. This is the muted grey for dark
     surfaces: 5.05:1 on #1F1F23. */
  --ep-muted-dark: #8E8E96;

  /* ---- Functional aliases (semantic names map onto brand) --------------- */
  --ep-red-hover:  #E51820;   /* darkened red for hover/active */
  --ep-red-press:  #C2141B;   /* pressed red */
  --ep-charcoal-2: #2E2E34;   /* raised charcoal surfaces */
  --ep-text:       var(--ep-charcoal);
  --ep-text-muted: var(--ep-gray-500);
  --ep-bg:         var(--ep-white);
  --ep-bg-alt:     var(--ep-gray);
  --ep-border:     var(--ep-gray-200);

  /* ---- Elevation -------------------------------------------------------- */
  --ep-shadow:     0 8px 30px rgba(31, 31, 35, .08);   /* soft premium shadow */
  --ep-shadow-sm:  0 2px 10px rgba(31, 31, 35, .06);
  --ep-shadow-lg:  0 20px 50px rgba(31, 31, 35, .14);
  --ep-shadow-red: 0 10px 26px rgba(255, 30, 38, .28); /* glow under red CTAs */

  /* ---- Radius ----------------------------------------------------------- */
  --ep-radius:     14px;       /* default corner radius everywhere */
  --ep-radius-sm:  10px;
  --ep-radius-lg:  22px;
  --ep-radius-pill: 999px;

  /* ---- Type ------------------------------------------------------------- */
  --ep-font-ui:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ep-font-display: "Sora", "Inter", system-ui, -apple-system, sans-serif;

  /* Fluid type scale (clamp: min, preferred-vw, max) */
  --ep-fs-display: clamp(2.6rem, 1.5rem + 4.4vw, 4.5rem);   /* hero H1 */
  --ep-fs-h1:      clamp(2.1rem, 1.4rem + 2.6vw, 3.1rem);
  --ep-fs-h2:      clamp(1.7rem, 1.2rem + 1.8vw, 2.4rem);
  --ep-fs-h3:      clamp(1.25rem, 1.05rem + .7vw, 1.5rem);
  --ep-fs-lead:    clamp(1.05rem, .98rem + .4vw, 1.25rem);
  --ep-fs-body:    1rem;
  --ep-fs-sm:      .875rem;
  --ep-fs-xs:      .75rem;

  --ep-lh-tight:   1.08;
  --ep-lh-snug:    1.3;
  --ep-lh-body:    1.6;

  --ep-ls-display: -.02em;   /* tight premium letter-spacing on display type */
  --ep-ls-tight:   -.01em;

  /* ---- Spacing scale (8px base) ---------------------------------------- */
  --ep-space-1:  .25rem;
  --ep-space-2:  .5rem;
  --ep-space-3:  .75rem;
  --ep-space-4:  1rem;
  --ep-space-5:  1.5rem;
  --ep-space-6:  2rem;
  --ep-space-7:  3rem;
  --ep-space-8:  4rem;

  /* Vertical rhythm for sections: 48–64px mobile, 80–120px desktop */
  --ep-section-y: clamp(3rem, 1.5rem + 6vw, 7.5rem);
  --ep-gutter:    clamp(1rem, .4rem + 2.4vw, 2rem);

  /* ---- Layout ----------------------------------------------------------- */
  --ep-maxw:      1200px;     /* default content container */
  --ep-maxw-wide: 1320px;
  --ep-maxw-prose: 720px;     /* long-form reading width */
  --ep-header-h:  78px;

  /* ---- Motion ----------------------------------------------------------- */
  --ep-ease:       cubic-bezier(.22, .61, .36, 1);   /* gentle ease-out */
  --ep-ease-soft:  cubic-bezier(.4, 0, .2, 1);
  --ep-dur-fast:   .15s;
  --ep-dur:        .22s;
  --ep-dur-slow:   .4s;

  /* ---- Z-index scale ---------------------------------------------------- */
  --ep-z-base:    1;
  --ep-z-sticky:  100;
  --ep-z-drawer:  200;
  --ep-z-modal:   300;
  --ep-z-toast:   400;
}