/* ============================================================
   tokens.css — The Money Mindshift Design System
   Aligned with Boundless You parent brand (April 2026 rebrand).
   Colour: Plum/Gold palette  |  Type: Playfair Display + Inter
   money.boundlessyou.in | Sprint MM-0 Rev 2
   ============================================================ */

:root {

  /* ── COLOUR PALETTE ─────────────────────────────────────── */

  /* Core brand — Plum/Gold system */
  --ivory:        #F4F2FC;   /* Pale Lavender Mist — page/card backgrounds   */
  --stone:        #EBE8F5;   /* Alternate section backgrounds                 */
  --taupe:        #C9C3DC;   /* Dividers, captions, input borders             */
  --charcoal:     #1D1640;   /* Primary body text (Charcoal Violet)           */
  --purple:       #6B35C4;   /* Royal Amethyst — buttons, accents, heroes     */
  --purple-h:     #5A28A8;   /* Button hover state                            */
  --muted:        #4B4868;   /* Meta text, timestamps, supplementary (Violet Grey) */

  /* Platform variables */
  --purple-light: #F0E8FF;   /* Tag pill backgrounds, info boxes              */
  --gold:         #C6A96B;   /* Muted Gold — same as Boundless You parent     */
  --gold-soft:    #D8C08A;   /* Soft Gold — hover / subtle accent             */

  /* Dark hero/section backgrounds */
  --deep-plum:    #12082A;   /* Primary hero/nav background                   */
  --dark-violet:  #1E1040;   /* Secondary dark sections                       */
  --obsidian:     #080610;   /* High-contrast blocks                          */
  --silver-lav:   #D6D2E4;   /* Typography on dark backgrounds                */

  /* Calculator-specific colour tokens */
  --old-regime:   #1D4ED8;   /* Old Regime highlight — blue (semantic)        */
  --old-regime-bg:#EFF6FF;   /* Old Regime result background                  */
  --new-regime:   #6B35C4;   /* New Regime highlight — Amethyst (brand match) */
  --new-regime-bg:#F0E8FF;   /* New Regime result background                  */
  --savings-pos:  #166534;   /* Positive savings — dark green (semantic)      */
  --savings-neg:  #991B1B;   /* Higher tax — dark red (semantic)              */
  --warning:      #92400E;   /* Warning text                                  */
  --warning-bg:   #FEF3C7;   /* Warning box background                        */
  --warning-bd:   #D97706;   /* Warning box border                            */
  --adequate:     #166534;   /* Retirement adequate (semantic green)           */
  --inadequate:   #991B1B;   /* Retirement inadequate (semantic red)          */

  /* Legacy alias — do not use in new code */
  --green:        #6B35C4;   /* Aliased to --purple for backward compat       */
  --green-h:      #5A28A8;   /* Aliased to --purple-h                         */
  --green-light:  #F0E8FF;   /* Aliased to --purple-light                     */

  /* ── TYPOGRAPHY ─────────────────────────────────────────── */
  --serif:        'Playfair Display', Georgia, serif;   /* Headlines          */
  --sans:         'Inter', system-ui, sans-serif;       /* Body & UI          */
  --mono:         'Courier New', Courier, monospace;    /* Data display       */

  /* ── FONT ALIASES (components.css compatibility) ───────── */
  --font-head:    var(--serif);
  --font-body:    var(--sans);

  /* ── LAYOUT ─────────────────────────────────────────────── */
  --beta-h:       36px;          /* Beta announcement strip height                */
  --nav-height:   70px;
  --content-max:  1160px;
  --section-pad:  clamp(4rem, 8vw, 7rem);
  --calc-max:     1120px;    /* Calculator page max width                     */

  /* ── SPACING SCALE ──────────────────────────────────────── */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;  --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.25rem;  --sp-6: 1.5rem;  --sp-8: 2rem;    --sp-12: 3rem;

  /* ── COMPONENTS ─────────────────────────────────────────── */
  --card-radius:  10px;
  --shadow-card:  0 2px 16px rgba(18,8,42,0.08);
  --shadow-modal: 0 8px 48px rgba(18,8,42,0.22);
  --input-border: #C9C3DC;
  --input-focus:  #6B35C4;
  --input-radius: 6px;

}