/* ═══════════════════════════════════════════════════════════════
   CALNCASH — Design Tokens
   Colors extracted from logo: dark forest green + warm cream
   ═══════════════════════════════════════════════════════════════ */

:root {

  /* ── Brand colors (from logo) ─────────────────────────────── */
  --forest:        #3d4a35;   /* Logo background: dark forest green  */
  --forest-dark:   #2b3425;   /* Deeper variant                      */
  --forest-mid:    #526644;   /* Mid-tone green for hover states      */
  --forest-muted:  #6e856a;   /* Muted green for secondary text       */
  --forest-pale:   #96b08e;   /* Pale green for text on dark bg       */
  --forest-ghost:  rgba(61,74,53,0.06);

  --cream:         #f0e8d4;   /* Logo graphic: warm cream             */
  --cream-light:   #f7f2e8;   /* Lightest cream — page background     */
  --cream-soft:    #ede5ce;   /* Soft cream for alt sections          */
  --cream-mid:     #e2d7be;   /* Mid cream for borders                */
  --cream-dark:    #cec2a5;   /* Darker cream for subtle dividers     */

  /* ── Semantic tokens ─────────────────────────────────────── */
  --bg:            var(--cream-light);
  --bg-alt:        var(--cream-soft);
  --bg-dark:       var(--forest);
  --bg-darker:     var(--forest-dark);
  --text:          var(--forest);
  --text-muted:    var(--forest-muted);
  --text-on-dark:  var(--cream);
  --text-dim-dark: var(--forest-pale);
  --border:        var(--cream-mid);
  --border-dark:   rgba(240, 232, 212, 0.12);

  /* ── WhatsApp colors ─────────────────────────────────────── */
  --wa-green:      #25d366;
  --wa-dark:       #128c7e;
  --wa-bg:         #0c1317;
  --wa-bubble:     #1f2c34;
  --wa-received:   #202c33;

  /* ── Typography ──────────────────────────────────────────── */
  --font-display:  'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --text-xs:    0.6875rem;  /* 11px */
  --text-sm:    0.8125rem;  /* 13px */
  --text-base:  1rem;       /* 16px */
  --text-lg:    1.125rem;   /* 18px */
  --text-xl:    1.3125rem;  /* 21px */
  --text-2xl:   1.5625rem;  /* 25px */
  --text-3xl:   1.875rem;   /* 30px */
  --text-4xl:   2.375rem;   /* 38px */
  --text-5xl:   3rem;       /* 48px */

  --weight-normal:    400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;

  --leading-tight:    1.15;
  --leading-snug:     1.30;
  --leading-base:     1.50;
  --leading-relaxed:  1.65;

  /* ── Spacing scale ───────────────────────────────────────── */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   20px;
  --sp-6:   24px;
  --sp-8:   32px;
  --sp-10:  40px;
  --sp-12:  48px;
  --sp-16:  64px;
  --sp-20:  80px;
  --sp-24:  96px;

  --section-y:    var(--sp-20);
  --max-w:        560px;
  --max-w-wide:   900px;
  --nav-h:        60px;

  /* ── Borders & radius ────────────────────────────────────── */
  --r-xs:    6px;
  --r-sm:    10px;
  --r-md:    16px;
  --r-lg:    22px;
  --r-xl:    32px;
  --r-full:  9999px;

  /* ── Shadows ─────────────────────────────────────────────── */
  --shadow-xs:   0 1px 4px rgba(43,52,37,0.07);
  --shadow-sm:   0 2px 12px rgba(43,52,37,0.09);
  --shadow-md:   0 8px 28px rgba(43,52,37,0.11);
  --shadow-lg:   0 20px 54px rgba(43,52,37,0.14);
  --shadow-xl:   0 32px 80px rgba(43,52,37,0.18);
  --shadow-glow: 0 0 0 0 rgba(61,74,53,0);

  /* ── Easing curves ───────────────────────────────────────── */
  --ease:         cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --ease-expo:    cubic-bezier(0.16, 1, 0.3, 1);     /* Smooth expo out   */
  --ease-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1); /* Overshoot bounce  */
  --ease-spring:  cubic-bezier(0.175, 0.885, 0.32, 1.275);

  /* ── Transitions ─────────────────────────────────────────── */
  --t-fast:    150ms var(--ease);
  --t-base:    260ms var(--ease);
  --t-slow:    420ms var(--ease-expo);
  --t-slower:  650ms var(--ease-expo);
}