/* ============ Credit Letter MVP Theme (from logo) ============ */
/* Extracted palette */
:root{
  /* Brand & accents (from the logo) */
  --brand:        #4368F1;  /* blue      */
  --brand-ink:    #021A48;  /* deep navy for headings/body */
  --brand-alt:    #5441DF;  /* indigo/purple */
  --accent:       #2FA7B5;  /* teal (checkmark) */
  --highlight:    #F9C558;  /* golden (envelope flap) */

  /* UI neutrals */
  --bg:           #F6F7FB;
  --card:         #FFFFFF;
  --border:       #E5E7EB;
  --text:         var(--brand-ink);
  --muted:        #6B7280;

  /* Interactive states */
  --brand-hover:  #2C49C8;  /* darker of --brand */
  --success:      #10B981;  /* for positive badges/toasts */
  --error:        #B91C1C;
  --warn:         #B45309;  /* warning orange */

  /* Tutorial section tints (match progress-ring colors) */
  --id-ink:       var(--brand);      /* Identity Theft   = blue */
  --gw-ink:       var(--accent);     /* Goodwill         = teal */
  --fu-ink:       var(--brand-alt);  /* Follow-Up / MOV  = indigo */

  /* soft tints & borders for those sections */
  --id-tint:      #ECF2FF;
  --id-border:    #C7D2FE;
  --gw-tint:      #E6FAFB;
  --gw-border:    #B9EFF2;
  --fu-tint:      #F0EDFF;
  --fu-border:    #D9D2FF;
}

/* Global helpers that lean on the variables above */
.button{ background:var(--brand); color:#fff; }
.button:hover{ background:var(--brand-hover); }
.text-muted{ color:var(--muted); }
.card{ background:var(--card); border:1px solid var(--border); border-radius:16px; }

/* Tutorial colorization */
.section-id{ background:var(--id-tint) !important; border-color:var(--id-border) !important; }
.section-gw{ background:var(--gw-tint) !important; border-color:var(--gw-border) !important; }
.section-fu{ background:var(--fu-tint) !important; border-color:var(--fu-border) !important; }

/* TOC accents */
.toc a[href="#id-theft"] { border-left:4px solid var(--id-ink); }
.toc a[href="#goodwill"] { border-left:4px solid var(--gw-ink); }
.toc a[href="#followup"] { border-left:4px solid var(--fu-ink); }

/* Progress rings (keep if you added rings) */
.ring-card.id .ring-fg{ stroke:var(--id-ink); }
.ring-card.gw .ring-fg{ stroke:var(--gw-ink); }
.ring-card.fu .ring-fg{ stroke:var(--fu-ink); }

/* Optional: gradient utility that matches the logo vibe */
.gradient-brand{
  background: linear-gradient(135deg, var(--brand-alt), var(--brand));
  color:#f01919;
}