/* ============================================================
   POCKETLY — light theme
   Rubik/Poppins · indigo→purple gradient · navy headings ·
   coral accent · isometric illustrations.
   Redefines the same --cb-* tokens the pages already use.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700&family=Poppins:wght@400;500;600&display=swap');

:root{
  /* ---------- BRAND (Pocketly) ---------- */
  --cb-primary:   #6747ee; /* indigo — primary actions, links */
  --cb-accent:    #9124dc; /* purple — gradient partner */
  --cb-blue:      #015dc7; /* alt-gradient blue */
  --cb-violet:    #a200ff;
  --cb-sky:       #12a9ff;
  --cb-coral:     #ff5a3c; /* warm accent (tags / highlights) */

  /* token aliases used across the pages */
  --cb-secondary: #1d274e; /* headings — Troma navy (not pure black) */
  --cb-text:      #747da1; /* body — blue-grey */
  --cb-muted:     #a2a9c7; /* meta / muted */
  --cb-watermelon:#ff5a3c; /* coral — "your fund" / hot tags */
  --cb-success:   #1bbf83; /* green — savings / cheapest / positive */
  --cb-warning:   #ff9f43;
  --cb-on-primary:#ffffff;

  /* ---------- SURFACES ---------- */
  --cb-bg:       #ffffff;
  --cb-surface:  #f5f6fb; /* light lavender-grey fills/cards */
  --cb-card-2:   #ffffff;
  --cb-border:   #e7e8ef;
  --cb-lav:      #f3f1fd; /* hero lavender blob */

  /* ---------- SIGNATURE GRADIENT ---------- */
  --cb-gradient:      linear-gradient(120deg,#6747ee 0%,#9124dc 100%);
  --cb-gradient-soft: linear-gradient(120deg,rgba(103,71,238,.10) 0%,rgba(145,36,220,.10) 100%);
  --cb-gradient-blue: linear-gradient(45deg,#015dc7 5%,#a200ff 100%);

  /* ---------- TYPE ---------- */
  --cb-font: 'Rubik','Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* ---------- RADII (Troma = gently rounded) ---------- */
  --cb-radius-pill: 8px;
  --cb-radius-card: 16px;
  --cb-radius-sm: 10px;
  --cb-radius-xs: 8px;

  /* ---------- ELEVATION (soft indigo-tinted) ---------- */
  --cb-shadow-sm: 0 6px 18px rgba(29,39,78,.06);
  --cb-shadow-md: 0 20px 50px rgba(29,39,78,.10);
  --cb-shadow-lg: 0 34px 80px rgba(29,39,78,.13);
  --cb-shadow-primary: 0 14px 30px rgba(103,71,238,.34);

  --cb-container: 1180px;
  --cb-section-y: 96px;
}

.gtext-coral{color:var(--cb-coral)}