/* ═══════════════════════════════════════════════════════════════════
   MsgBox — unified design tokens + base typography
   Single source of truth for: font, colors, headings, base buttons.
   Load this FIRST on every page (before any page-specific styles).
═══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@400;500;600;700;800&display=swap');

/* ══════════ DESIGN TOKENS ══════════ */
:root {
  /* Brand */
  --brand:        #5B3FD6;
  --brand-ink:    #2D1F73;
  --brand-soft:   #EFEBFC;
  --brand-softer: #F7F5FE;

  /* Product accents */
  --wa:        #075E54;
  --wa-ink:    #054640;
  --wa-soft:   #E6F4EF;
  --web:       #2563EB;
  --web-ink:   #1D4FCC;
  --web-soft:  #E7EEFD;

  /* Neutrals */
  --ink:    #14132B;
  --ink-2:  #45435E;
  --ink-3:  #6E6C85;
  --ink-4:  #9C9AB0;
  --line:   #E8E7EF;
  --line-2: #F0EFF5;

  /* Backgrounds — pure white for cards/main, soft gray for section tints */
  --bg:      #FFFFFF;
  --bg-tint: #FAFAFC;

  /* Radii */
  --radius:    14px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(20,19,43,.04), 0 1px 1px rgba(20,19,43,.02);
  --shadow-md: 0 8px 24px -8px rgba(20,19,43,.10), 0 2px 6px -2px rgba(20,19,43,.05);
  --shadow-lg: 0 24px 60px -20px rgba(20,19,43,.18), 0 4px 12px -4px rgba(20,19,43,.06);

  /* Layout */
  --container: 1180px;

  /* ─── Backwards-compat aliases for legacy style.css names ─── */
  --background:        var(--bg-tint);
  --foreground:        var(--ink);
  --card:              var(--bg);
  --card-foreground:   var(--ink);
  --primary:           var(--brand);
  --primary-foreground:#ffffff;
  --primary-glow:      var(--brand-ink);
  --secondary-accent:  var(--brand);
  --tertiary:          var(--brand-ink);
  --secondary:         var(--line-2);
  --secondary-foreground: var(--ink);
  --muted:             var(--line-2);
  --muted-foreground:  var(--ink-3);
  --accent:            var(--brand);
  --border:            var(--line);
  --input:             var(--line);
  --ring:              var(--brand);

  /* Legacy purple tokens used inside web-bot.html */
  --purple:       var(--brand);
  --purple-light: #8B6FE0;
  --purple-dark:  var(--brand-ink);
  --pink:         #ec4899;
  --bg-white:     var(--bg);
  --text:         var(--ink);
  --text-muted:   var(--ink-3);
}

/* ══════════ RESET ══════════ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: clip; }
img, svg, video { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* ══════════ BASE TYPOGRAPHY — Heebo across the entire site ══════════ */
html { scroll-behavior: smooth; }

body {
  font-family: 'Heebo', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--ink);
  background: var(--bg);
  font-size: 16px;
  line-height: 1.55;
  direction: rtl;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Heading scale — pages can override sizes per section, but the baseline is unified */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: inherit;
  color: var(--ink);
  letter-spacing: -.02em;
  font-weight: 700;
}
h1 { font-size: 56px; font-weight: 800; line-height: 1.05; letter-spacing: -.03em; }
h2 { font-size: 40px; line-height: 1.10; }
h3 { font-size: 22px; line-height: 1.25; }
h4 { font-size: 17px; line-height: 1.30; }
h5 { font-size: 15px; line-height: 1.30; }

p { margin: 0; }

@media (max-width: 1180px) and (min-width: 901px) {
  h1 { font-size: 48px; }
}
@media (max-width: 900px) {
  h1 { font-size: 38px; }
  h2 { font-size: 30px; }
  h3 { font-size: 19px; }
}
@media (max-width: 560px) {
  h1 { font-size: 32px; }
}

/* ══════════ PRINT-FRIENDLY DEFAULTS ══════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}