/* ============================================================
   JustFinTech — Color tokens
   Brand is indigo + cool neutrals on a soft off-white surface,
   with deep near-black sections. One warm accent (signal yellow).
   Decorative service-card gradients (violet / gold) live at the
   bottom. Base ramps first, semantic aliases second.
   ============================================================ */

:root {
  /* ---- Indigo (brand / primary) ------------------------------ */
  --indigo-900: #0b0b4a;            /* deepest, near-navy ink      */
  --indigo-800: #1919a6;            /* rgb(25,25,166) gradient end */
  --indigo-700: #2424ab;            /* rgb(36,36,171)              */
  --indigo-600: #2f2fb2;            /* rgb(47,47,178) PRIMARY      */
  --indigo-500: #3d3bd7;            /* rgb(62,59,215) bright CTA   */
  --indigo-400: #5353c5;            /* rgb(83,83,197) gradient top */
  --indigo-300: #8d8ddf;            /* rgb(141,141,223) soft accent*/
  --indigo-200: #c6c6ef;            /* tint                        */
  --indigo-100: #e3e3f4;            /* rgb(227,227,244) lavender   */
  --indigo-050: #f0f0fb;            /* faintest wash               */

  /* ---- Neutrals (cool gray ramp) ----------------------------- */
  --ink:        #040429;            /* rgb(4,4,41) headings ink    */
  --black:      #111111;            /* rgb(17,17,17) dark surfaces */
  --gray-900:   #171717;            /* rgb(23,23,23)               */
  --gray-800:   #212121;            /* rgb(33,33,33) body text     */
  --gray-700:   #333333;            /* rgb(51,51,51)               */
  --gray-600:   #565656;            /* rgb(86,86,86)               */
  --gray-500:   #606060;            /* rgb(96,96,96) secondary     */
  --gray-400:   #909090;            /* rgb(144,144,144) muted      */
  --gray-300:   #cdd0de;            /* rgb(206,208,222) cool border*/
  --gray-250:   #d9d9d9;            /* rgb(217,217,217)            */
  --gray-200:   #e4e4e7;            /* rgb(228,228,231) hairline   */
  --gray-150:   #efefef;            /* rgb(239,239,239)            */
  --gray-100:   #f5f5f8;            /* rgb(245,245,248) SURFACE    */
  --white:      #ffffff;

  /* dark-section card steps (cards that sit ON the black sections) */
  --dark-surface:   #111111;
  --dark-card:      #1c1c1e;
  --dark-card-2:    #2a2a2c;
  --dark-hairline:  rgba(255,255,255,0.08);

  /* ---- Accent (signal yellow) -------------------------------- */
  --yellow-500: #ffdd2d;            /* rgb(255,221,45) highlight   */

  /* ---- Semantic ---------------------------------------------- */
  --status-success: #1f8a5b;
  --status-warning: #d9962a;
  --status-error:   #b25353;        /* rgb(178,83,83)              */

  /* ---- Brand gradients --------------------------------------- */
  --grad-cta:    linear-gradient(110deg, #5353c5 -15%, #1919a6 140%); /* @kind color */
  --grad-indigo: linear-gradient(135deg, #3d3bd7 0%, #1919a6 100%); /* @kind color */
  --grad-violet: linear-gradient(150deg, #8b7bc6 0%, #5b4f9a 60%, #3a3568 100%); /* @kind color */
  --grad-gold:   linear-gradient(150deg, #b9966b 0%, #8a6b48 55%, #5e4633 100%); /* @kind color */
  --grad-hero:   linear-gradient(180deg, #ffffff 0%, #e8e8f6 100%); /* @kind color */

  /* ---- Semantic aliases (use these in components) ------------ */
  --color-brand:        var(--indigo-600);
  --color-brand-bright: var(--indigo-500);
  --color-brand-deep:   var(--indigo-800);

  --bg-page:        var(--gray-100);
  --bg-elevated:    var(--white);
  --bg-dark:        var(--black);
  --bg-lavender:    var(--indigo-100);

  --surface-card:        var(--white);
  --surface-card-muted:  var(--gray-100);
  --surface-dark-card:   var(--dark-card);

  --text-strong:    var(--ink);
  --text-body:      var(--gray-800);
  --text-secondary: var(--gray-500);
  --text-muted:     var(--gray-400);
  --text-on-dark:   var(--white);
  --text-on-brand:  var(--white);
  --text-link:      var(--indigo-600);

  --border-subtle:  var(--gray-200);
  --border-default: var(--gray-300);
  --border-strong:  var(--gray-400);
  --border-on-dark: var(--dark-hairline);

  --focus-ring:     rgba(61,59,215,0.35);
}