/* =========================================================================
   Webecom Design System — Colors & Type
   Premium • Ludique • Moderne
   ========================================================================= */


:root {
  /* ---------- BRAND CORE ---------- */
  --webecom-blue:        #0B76C5; /* Primary CTA, links, brand highlights */
  --webecom-blue-hover:  #0966AD; /* Hover state for primary blue */
  --webecom-blue-press:  #075590; /* Press / active state */
  --webecom-blue-soft:   #4FA8E8; /* Sticker / mascot accent fills */
  --webecom-blue-tint:   #E6F2FB; /* Soft backgrounds */

  --webecom-navy:        #2B2D42; /* Secondary background, dark sections, text */
  --webecom-navy-soft:   #3A3D58; /* Borders/dividers on navy */
  --webecom-navy-tint:   #EDEEF3; /* Light sections that nod to navy */

  --webecom-yellow:      #FFDE59; /* Sunshine yellow — sticker/accent */
  --webecom-yellow-deep: #F5C400; /* Pressed yellow */
  --webecom-purple:      #4B2FCB; /* Sticker purple (Webi'TIPS bg) */
  --webecom-purple-deep: #3A22A8;
  --webecom-cream:       #FFF6E2; /* "Webi" cream text on stickers */

  /* ---------- POP ACCENTS (use sparingly, illustrative) ---------- */
  --pop-pink:    #FF5BA1;
  --pop-coral:   #FF7A59;
  --pop-mint:    #4FE3C1;
  --pop-lime:    #C6F24E;

  /* ---------- NEUTRALS ---------- */
  --white:    #FFFFFF;
  --gray-50:  #F8F9FB;
  --gray-100: #F1F2F6;
  --gray-200: #E4E6EE;
  --gray-300: #CDD0DD;
  --gray-400: #9CA1B5;
  --gray-500: #6E7389;
  --gray-600: #4D5168;
  --gray-700: #363A50;
  --gray-800: #22243A;
  --gray-900: #14162A;

  /* ---------- SEMANTIC ---------- */
  --success: #1FB46A;
  --warning: #FFB020;
  --danger:  #E5484D;
  --info:    var(--webecom-blue);

  /* ---------- SURFACE / TEXT ---------- */
  --bg:           var(--white);          /* Primary background */
  --bg-alt:       var(--gray-50);        /* Alternate light background */
  --bg-dark:      var(--webecom-navy);   /* Secondary dark background */
  --bg-dark-alt:  #232539;               /* Slightly deeper navy */

  --fg1: var(--webecom-navy);  /* Primary text on light */
  --fg2: var(--gray-600);      /* Secondary text on light */
  --fg3: var(--gray-500);      /* Tertiary / meta */
  --fg-on-dark-1: var(--white);
  --fg-on-dark-2: #C9CBDA;
  --fg-on-dark-3: #8E92A8;

  --border:        var(--gray-200);
  --border-strong: var(--gray-300);
  --border-dark:   var(--webecom-navy-soft);

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Bricolage Grotesque', 'Cabinet Grotesk', 'Satoshi', system-ui, sans-serif;
  --font-body:    'Manrope', 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---------- TYPE SCALE ---------- */
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-48: 3rem;
  --fs-64: 4rem;
  --fs-80: 5rem;
  --fs-96: 6rem;

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.45;
  --lh-relaxed: 1.6;

  --tracking-tight:  -0.03em;
  --tracking-snug:   -0.015em;
  --tracking-normal: 0em;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.12em;

  /* ---------- SPACING (8pt grid + a few halves) ---------- */
  --sp-2:   2px;
  --sp-4:   4px;
  --sp-6:   6px;
  --sp-8:   8px;
  --sp-12:  12px;
  --sp-16:  16px;
  --sp-20:  20px;
  --sp-24:  24px;
  --sp-32:  32px;
  --sp-40:  40px;
  --sp-48:  48px;
  --sp-64:  64px;
  --sp-80:  80px;
  --sp-96:  96px;
  --sp-128: 128px;

  /* ---------- RADII (generous, friendly) ---------- */
  --r-4:    4px;
  --r-8:    8px;
  --r-12:   12px;
  --r-16:   16px;
  --r-20:   20px;
  --r-24:   24px;
  --r-32:   32px;
  --r-pill: 999px;

  /* ---------- SHADOWS ---------- */
  --shadow-xs:  0 1px 2px rgba(20, 22, 42, 0.06);
  --shadow-sm:  0 2px 6px rgba(20, 22, 42, 0.06), 0 1px 2px rgba(20, 22, 42, 0.04);
  --shadow-md:  0 8px 20px rgba(20, 22, 42, 0.08), 0 2px 6px rgba(20, 22, 42, 0.05);
  --shadow-lg:  0 18px 40px rgba(20, 22, 42, 0.12), 0 4px 12px rgba(20, 22, 42, 0.06);
  --shadow-xl:  0 32px 80px rgba(20, 22, 42, 0.18), 0 8px 24px rgba(20, 22, 42, 0.08);
  /* Sticker shadow — used on illustrative pop elements */
  --shadow-sticker: 4px 4px 0 0 var(--webecom-navy);
  --shadow-sticker-blue: 4px 4px 0 0 var(--webecom-blue);
  /* Glow on dark bg for pop accents */
  --glow-blue:   0 0 32px rgba(11,118,197,0.45);
  --glow-yellow: 0 0 28px rgba(255,222,89,0.55);

  /* ---------- MOTION ---------- */
  --ease-out:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:   140ms;
  --dur-base:   220ms;
  --dur-slow:   420ms;
}

/* =========================================================================
   SEMANTIC TYPE STYLES
   Use these classes (or @apply via copy) directly in markup.
   ========================================================================= */

html { font-family: var(--font-body); color: var(--fg1); background: var(--bg); }
body { font: 400 var(--fs-16)/var(--lh-relaxed) var(--font-body); color: var(--fg1); }

.h-display, h1.display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3rem, 6vw + 1rem, 6rem);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-variation-settings: 'opsz' 96;
}
.h1, h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.25rem, 3.5vw + 1rem, var(--fs-64));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-variation-settings: 'opsz' 64;
}
.h2, h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 2vw + 1rem, var(--fs-48));
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  font-variation-settings: 'opsz' 48;
}
.h3, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-32);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
}
.h4, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
}
.h5, h5 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-20);
  line-height: var(--lh-normal);
}

.eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-12);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--webecom-blue);
}

.lead {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-20);
  line-height: var(--lh-relaxed);
  color: var(--fg2);
}

p, .body { font: 400 var(--fs-16)/var(--lh-relaxed) var(--font-body); color: var(--fg1); }
.body-sm { font: 400 var(--fs-14)/var(--lh-normal) var(--font-body); color: var(--fg2); }
.caption { font: 500 var(--fs-12)/1.4 var(--font-body); color: var(--fg3); letter-spacing: var(--tracking-wide); }

/* The "metric" — a hero-sized number anchor (e.g. +30% C.A.) */
.metric {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3.5rem, 8vw, 7rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--webecom-blue);
  font-variation-settings: 'opsz' 96;
}

code, .mono { font-family: var(--font-mono); font-size: 0.9em; }

a { color: var(--webecom-blue); text-decoration: none; }
a:hover { color: var(--webecom-blue-hover); text-decoration: underline; text-underline-offset: 3px; }

::selection { background: var(--webecom-yellow); color: var(--webecom-navy); }