/* ============================================================
   Dream Financials — CSS bridge
   ------------------------------------------------------------
   Frontend JS ported from the Adda codebase uses tokens from
   illunise.css (Adda's design system). Dream keeps its own theme
   (styles.css — red/pink primary). This file remaps every
   Adda token onto Dream's palette so those pages render with
   Dream's colors without pulling in illunise.css.
   ============================================================ */

:root {
  /* Brand family */
  --brand:            var(--primary);
  --brand-dark:       var(--primary-dark);
  --brand-light:      var(--primary-light);
  --brand-glow:       var(--primary-glow);
  --gradient-brand:   var(--grad-primary);

  /* Text (Adda's ink scale → Dream's grays) */
  --ink:              var(--text);
  --ink-soft:         #4B5063;
  --ink-faint:        #8A8FA3;
  --ink-inverse:      #FFFFFF;

  /* Surface / structure */
  --surface:          var(--card);
  --surface-alt:      #F8F8FC;
  --line:             var(--border);
  --line-soft:        rgba(17, 20, 45, 0.08);
  --panel:            var(--card);

  /* Shadows */
  --shadow-hero:      0 8px 32px var(--primary-glow), inset 0 1px 0 rgba(255,255,255,0.15);
  --shadow-tile:      var(--shadow-soft);
  --shadow-card:      var(--shadow-card);
  --shadow-md:        0 4px 16px rgba(20, 22, 55, 0.10);

  /* Base background + subtle brand tint (Adda highlight surfaces) */
  --bg-1:             var(--bg);
  --brand-tint:       var(--primary-glow2);

  /* Motion + typography (Adda used --ease on transitions, --font-body on text) */
  --ease:             cubic-bezier(0.4, 0, 0.2, 1);
  --font-body:        'Trim', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Colored chips (Adda .chip-green / .chip-red / .chip-purple token pairs) */
  --chip-green-bg:    var(--success-bg);
  --chip-green-fg:    var(--success);
  --chip-red-bg:      var(--danger-bg);
  --chip-red-fg:      var(--danger);
  --chip-purple-bg:   rgba(99, 102, 241, 0.12);
  --chip-purple-fg:   #6366F1;
}

/* Icon tile used inside gradient hero cards (Adda's .icon-tile--onhero). */
.icon-tile {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 10px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 15px;
}
.icon-tile--onhero { background: rgba(255, 255, 255, 0.18); }

/* Section spacing helper (used by hero + panels ported from Adda). */
.section { margin-bottom: 16px; }

/* Chip styles referenced by ported JS (Adda .chip / .chip-neutral). */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(17, 20, 45, 0.05);
  color: var(--ink-soft);
  font-size: 11px; font-weight: 700;
}
.chip-neutral { background: rgba(17, 20, 45, 0.05); color: var(--ink-soft); }

/* .auto-fit grid used on gateways cards + others ported from Adda. */
.auto-fit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
}