/* =========================================================
   Extraweb Design Tokens — Marketing Site CRM
   Derived from: extraweb-design-system/colors_and_type.css
   Only the 4 Poppins weights actually used (400/500/600/700).
   ========================================================= */

@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/Poppins-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/Poppins-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/Poppins-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/Poppins-Bold.ttf') format('truetype'); }

:root {
  /* ---------- BRAND PALETTE (canonical from logo SVGs) ---------- */
  --ew-magenta:        #e4007d;
  --ew-magenta-hot:    #ff0080;
  --ew-magenta-ink:    #b8006a;
  --ew-magenta-soft:   #ffe3f1;

  --ew-violet:         #230159;
  --ew-violet-deep:    #180040;
  --ew-violet-soft:    #f4f1fa;

  --ew-white:          #ffffff;
  --ew-off:            #fafafa;
  --ew-gray-100:       #f2f2f4;
  --ew-gray-200:       #e5e5ea;
  --ew-gray-300:       #cfcfd6;
  --ew-gray-500:       #8a8a94;
  --ew-gray-700:       #4a4a55;
  --ew-black:          #0c0014;

  /* ---------- SEMANTIC ---------- */
  --fg-1:              var(--ew-violet);
  --fg-2:              var(--ew-gray-700);
  --fg-3:              var(--ew-gray-500);
  --fg-on-dark:        var(--ew-white);
  --fg-on-dark-2:      rgba(255, 255, 255, 0.72);
  --fg-on-dark-3:      rgba(255, 255, 255, 0.48);
  --fg-accent:         var(--ew-magenta);

  --bg-page:           var(--ew-white);
  --bg-alt:            var(--ew-off);
  --bg-dark:           var(--ew-violet);
  --bg-hot:            var(--ew-magenta);

  --border-subtle:     var(--ew-gray-200);
  --border-on-dark:    rgba(255, 255, 255, 0.12);

  /* ---------- TYPE ---------- */
  --font-sans: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --fs-display:  clamp(44px, 5.4vw, 68px);
  --fs-h1:       clamp(34px, 3.6vw, 48px);
  --fs-h2:       clamp(28px, 2.8vw, 38px);
  --fs-h3:       22px;
  --fs-h4:       18px;
  --fs-body:     16px;
  --fs-body-sm:  14px;
  --fs-meta:     13px;
  --fs-label:    12px;

  --lh-tight:    1.08;
  --lh-snug:     1.25;
  --lh-normal:   1.55;
  --lh-loose:    1.7;

  --ls-label:    0.04em;
  --ws-label:    0.2em;
  --ls-tight:    -0.015em;

  /* ---------- SPACING & SHAPE ---------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;

  --r-sm:  4px;
  --r-md:  8px;
  --r-lg:  14px;
  --r-xl:  22px;
  --r-pill: 999px;

  --shadow-1: 0 1px 2px rgba(35, 1, 89, 0.06), 0 1px 1px rgba(35, 1, 89, 0.04);
  --shadow-2: 0 4px 16px rgba(35, 1, 89, 0.08);
  --shadow-3: 0 18px 48px -12px rgba(35, 1, 89, 0.22);
  --shadow-hot: 0 12px 28px -10px rgba(228, 0, 125, 0.45);

  --container: 1240px;
  --container-pad: 32px;
}

@media (max-width: 768px) {
  :root { --container-pad: 20px; }
}