/* ============================================================
   WaMojo — Design Tokens
   Hand-crafted WhatsApp-native design language.
   Accessible contrast, light + dark, custom scales.
   ============================================================ */

:root {
  /* ---- Brand / WhatsApp palette ---- */
  --wa-green:        #25D366;   /* primary CTA / accent */
  --wa-green-600:    #1FBE5A;
  --wa-green-700:    #12A150;
  --wa-teal:         #128C7E;   /* headers / secondary */
  --wa-teal-deep:    #075E54;   /* deep brand */
  --wa-green-soft:   #DCF8C6;   /* outgoing bubble (light) */
  --wa-green-tint:   #E7FCE3;

  /* Mojo energy accents (for FOMO / highlights) */
  --mojo-lime:       #A8FF53;
  --mojo-mint:       #5BE9B9;
  --mojo-gold:       #FFC93C;
  --mojo-coral:      #FF6B57;
  --mojo-violet:     #7C5CFC;

  /* ---- Neutrals (light) ---- */
  --bg:              #F6F8F7;
  --bg-elevated:     #FFFFFF;
  --bg-chat:         #EFEAE2;   /* WA chat canvas */
  --panel:           #FFFFFF;
  --ink:             #0B141A;   /* primary text */
  --ink-2:           #3B4A54;   /* secondary text */
  --ink-3:           #667781;   /* muted / captions */
  --line:            #E4E9E7;
  --line-2:          #D6DEDB;
  --ring:            rgba(37,211,102,.35);

  /* Bubble states */
  --bubble-in:       #FFFFFF;
  --bubble-out:      #D9FDD3;
  --tick-blue:       #53BDEB;

  /* ---- Type ---- */
  --font-display: "Clash Display", "Sora", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Plus Jakarta Sans", "Inter", "Segoe UI", system-ui, sans-serif;
  --font-mono:    "Space Mono", ui-monospace, monospace;

  --fs-hero:   clamp(2.6rem, 6vw, 5rem);
  --fs-h1:     clamp(2rem, 4vw, 3.2rem);
  --fs-h2:     clamp(1.6rem, 3vw, 2.4rem);
  --fs-h3:     1.35rem;
  --fs-lg:     1.15rem;
  --fs-base:   1rem;
  --fs-sm:     .9rem;
  --fs-xs:     .78rem;

  /* ---- Radius / space / shadow ---- */
  --r-xs: 8px;  --r-sm: 12px;  --r-md: 18px;  --r-lg: 26px;  --r-xl: 36px;  --r-pill: 999px;
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.5rem;
  --sp-6:2rem; --sp-7:3rem; --sp-8:4.5rem; --sp-9:6.5rem;

  --sh-sm: 0 1px 2px rgba(11,20,26,.06), 0 1px 3px rgba(11,20,26,.05);
  --sh-md: 0 6px 18px rgba(11,20,26,.08), 0 2px 6px rgba(11,20,26,.05);
  --sh-lg: 0 24px 60px rgba(11,20,26,.14), 0 8px 20px rgba(11,20,26,.08);
  --sh-glow: 0 12px 40px rgba(37,211,102,.35);

  --maxw: 1200px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---- Dark theme (WhatsApp dark) ---- */
:root[data-theme="dark"] {
  --bg:            #0B141A;
  --bg-elevated:   #111B21;
  --bg-chat:       #0B141A;
  --panel:         #182229;
  --ink:           #E9EDEF;
  --ink-2:         #C6D0D4;
  --ink-3:         #8696A0;
  --line:          #22303A;
  --line-2:        #2A3942;
  --bubble-in:     #202C33;
  --bubble-out:    #005C4B;
  --wa-green-soft: #025144;
  --wa-green-tint: #10231D;
  --sh-lg: 0 24px 60px rgba(0,0,0,.5), 0 8px 20px rgba(0,0,0,.4);
  --sh-md: 0 6px 18px rgba(0,0,0,.35);
}