/* ==========================================================================
   EcomElevate — Design Tokens
   Derived from logo: black base + signature orange gradient
   ========================================================================== */

:root {
  /* Brand colors */
  /* Channel values — lets you reuse brand colors at ANY opacity.
     Without this you cannot write rgba(var(--color-primary), .5),
     which is why every new section ended up hand-mixing its own orange. */
  --color-primary-rgb: 255, 138, 0;
  --color-black-rgb: 10, 10, 10;

  /* Hero / dark-section theme — change these ONCE, every page follows */
  --hero-base-start: #1a1006;   /* warm near-black */
  --hero-base-end:   #000000;
  --hero-glow:       rgba(var(--color-primary-rgb), 0.765);
  --hero-glow-shape: 120% 140% at 48% 0%;

  /* How far the CTA card overlaps the footer */
  --cta-overlap: 110px;
  --color-primary: #ff8a00;
  --color-primary-dark: #e06f00;
  --color-primary-light: #ffb457;
  --color-primary-soft: #fff1e0;

  --color-black: #0a0a0a;
  --color-black-soft: #121212;
  --color-surface: #161616;
  --color-surface-alt: #1f1f1f;

  --color-white: #ffffff;
  --color-off-white: #f8f7f5;
  --color-text: #1c1c1c;
  --color-text-muted: #6b6b6b;
  --color-text-invert: #f4f4f4;
  --color-border: #ececec;
  --color-border-dark: #2b2b2b;

  /* Gradient (mirrors the sweeping stroke in the logo) */
  --gradient-primary: linear-gradient(120deg, #ff8a00 0%, #ffb457 100%);
  --gradient-dark: linear-gradient(160deg, #121212 0%, #000000 100%);

  /* Typography */
  --font-display: 'Poppins', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;

  --fs-xs: 0.8rem;
  --fs-sm: 0.9rem;
  --fs-base: 1rem;
  --fs-md: 1.15rem;
  --fs-lg: 1.5rem;
  --fs-xl: 2rem;
  --fs-2xl: 2.75rem;
  --fs-3xl: 3.5rem;

  /* Spacing scale */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4.5rem;
  --space-7: 6rem;

  /* Layout */
  --container-width: 1240px;
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  /* Shadow / motion */
  --shadow-soft: 0 20px 45px rgba(0, 0, 0, 0.08);
  --shadow-card: 0 12px 30px rgba(10, 10, 10, 0.06);
  --transition-base: 0.25s ease;
}