/* ─────────────────────────────────────────────────────────
   PRIMITIVE TOKENS — Raw atomic values
   Edit raw values here. Never reference these in components.
   Components reference SEMANTIC tokens (02-semantic.css).
───────────────────────────────────────────────────────── */
:root {
  /* COLOR PRIMITIVES */
  --green-500:    #2E7D6B;
  --green-700:    #1F5A4C;
  --gold-500:     #E8B86D;
  --neutral-0:    #FFFFFF;
  --neutral-50:   #F7F9F8;
  --neutral-200:  #E5E7EB;
  --neutral-400:  #9CA3AF;
  --neutral-600:  #5F6B6A;
  --neutral-900:  #1A1A1A;
  --whatsapp:     #25D366;

  /* SPACING PRIMITIVES — strict 8px grid */
  --size-1:   4px;
  --size-2:   8px;
  --size-4:   16px;
  --size-6:   24px;
  --size-8:   32px;
  --size-12:  48px;
  --size-16:  64px;
  --size-20:  80px;
  --size-24:  96px;

  /* TYPOGRAPHY — FAMILIES */
  --font-sans: 'ABeeZee', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  /* TYPOGRAPHY — WEIGHTS */
  --weight-400: 400;
  --weight-500: 500;
  --weight-600: 600;

  /* TYPOGRAPHY — TYPE SCALE (desktop) */
  --type-h1:      48px;
  --type-h2:      36px;
  --type-h3:      28px;
  --type-h4:      22px;
  --type-body-l:  18px;
  --type-body:    16px;
  --type-small:   14px;

  /* TYPOGRAPHY — LINE HEIGHTS (desktop) */
  --lh-h1:      56px;
  --lh-h2:      44px;
  --lh-h3:      36px;
  --lh-h4:      30px;
  --lh-body-l:  28px;
  --lh-body:    26px;
  --lh-small:   22px;

  /* RADIUS PRIMITIVES */
  --radius-2:    4px;
  --radius-4:    8px;
  --radius-6:    12px;
  --radius-full: 9999px;

  /* SHADOW PRIMITIVES */
  --shadow-card:      0 4px 12px rgba(0, 0, 0, 0.05);
  --shadow-elevated:  0 8px 24px rgba(0, 0, 0, 0.08);

  /* MOTION PRIMITIVES */
  --ease-fast:  150ms ease;
  --ease:       250ms ease;

  /* LAYOUT PRIMITIVES */
  --container-max: 1200px;
  --max-text-width: 640px;
}

/* MOBILE TYPE SCALE OVERRIDES (per spec) */
@media (max-width: 768px) {
  :root {
    --type-h1:    32px;
    --type-h2:    26px;
    --type-h3:    22px;
    --lh-h1:      40px;
    --lh-h2:      34px;
    --lh-h3:      30px;
    --lh-body:    24px;
  }
}