/* ============================================================
   Aurora — Color tokens
   ------------------------------------------------------------
   Base palette + semantic aliases, extracted from the Aurora
   Figma variable collection. Aurora Blue (#0000A0) is the
   primary brand colour; the product UI shown in this system is
   the dark-mode mobile bank, so dark "surface" tokens are
   included alongside the canonical palette.
   ============================================================ */

:root {
  /* ---- Brand blues ---------------------------------------- */
  --color-aurora-blue:   rgb(0, 0, 160);    /* #0000A0 primary brand */
  --color-deep-blue:     rgb(0, 0, 94);     /* #00005E deepest */
  --color-vivid-blue:    rgb(0, 0, 255);    /* #0000FF interactive hover */
  --color-light-blue:    rgb(153, 204, 255);/* #99CCFF accent / dark-mode primary */
  --color-cloud-blue:    rgb(220, 237, 255);/* #DCEDFF tint */

  /* ---- Greys ---------------------------------------------- */
  --color-white:         rgb(255, 255, 255);
  --color-cool-gray:     rgb(241, 242, 244);/* #F1F2F4 off-white */
  --color-light-gray:    rgb(227, 227, 227);/* #E3E3E3 */
  --color-medium-gray:   rgb(201, 199, 199);/* #C9C7C7 muted text on dark */
  --color-aurora-gray:   rgb(139, 138, 141);/* #8B8A8D icon / chevron grey */
  --color-dark-gray:     rgb(90, 87, 92);   /* #5A575C secondary text on light */
  --color-eclipse-gray:  rgb(56, 56, 56);   /* #383838 */
  --color-darkest-gray:  rgb(33, 33, 33);   /* #212121 */
  --color-black:         rgb(0, 0, 0);

  /* ---- Accent / status ------------------------------------ */
  --color-green:         rgb(64, 191, 163); /* #40BFA3 positive (dark) */
  --color-green-dark:    rgb(13, 130, 104); /* #0D8268 positive (light) */
  --color-red:           rgb(252, 97, 97);  /* #FC6161 negative (dark) */
  --color-red-dark:      rgb(231, 4, 4);    /* #E70404 negative (light) */
  --color-yellow:        rgb(255, 225, 131);/* #FFE183 alert (dark) */
  --color-yellow-dark:   rgb(255, 207, 61); /* #FFCF3D alert (light) */

  /* ---- Mobile dark surfaces (product) --------------------- */
  --color-app-bg:        rgb(15, 18, 23);   /* #0F1217 screen background */
  --color-surface-slate: rgb(29, 32, 38);   /* #1D2026 widget card */
  --color-surface-navy:  rgb(22, 31, 58);   /* #161F3A promo card / icon chip */
  --color-surface-row:   rgb(44, 47, 53);   /* #2C2F35 list row */
  --color-account-top:   rgb(79, 111, 176); /* #4F6FB0 account gradient top */
  --color-icon-slate:    rgb(68, 86, 106);  /* #44566A muted icon chip */
  --color-glow-blue:     rgba(153, 204, 255, 0.12); /* card edge glow */

  /* =========================================================
     SEMANTIC ALIASES — reference these in components
     ========================================================= */

  /* Surfaces (dark-mode product is the default context) */
  --surface-app:         var(--color-app-bg);
  --surface-card:        var(--color-surface-slate);
  --surface-card-navy:   var(--color-surface-navy);
  --surface-row:         var(--color-surface-row);
  --surface-chip:        var(--color-surface-navy);

  /* Text */
  --text-primary:        var(--color-white);
  --text-secondary:      var(--color-medium-gray);
  --text-muted:          var(--color-aurora-gray);
  --text-accent:         var(--color-light-blue);
  --text-on-light:       var(--color-black);
  --text-on-light-2nd:   var(--color-dark-gray);

  /* Interactive (default = dark mode → light-blue primary) */
  --interactive-primary:        var(--color-light-blue);
  --interactive-primary-hover:  var(--color-cloud-blue);
  --interactive-on-primary:     var(--color-aurora-blue);
  --interactive-text:           var(--color-light-blue);
  --interactive-text-hover:     var(--color-cloud-blue);
  --interactive-disabled:       var(--color-eclipse-gray);
  --focus-ring:                 var(--color-white);

  /* Status */
  --status-positive:     var(--color-green);
  --status-negative:     var(--color-red);
  --status-alert:        var(--color-yellow);
  --status-info:         var(--color-light-blue);

  /* Borders & dividers */
  --border-subtle:       rgba(255, 255, 255, 0.08);
  --border-row:          rgba(255, 255, 255, 0.06);

  /* Brand gradients */
  --gradient-account: linear-gradient(180deg, var(--color-account-top) 0%, var(--color-aurora-blue) 100%); /* @kind other */
  --gradient-card-glow: linear-gradient(-53.6deg, rgba(153,204,255,0) 35%, rgba(153,204,255,0.12) 100%); /* @kind other */
}

/* ---- Light theme (web / on-light contexts) --------------- */
:root[data-theme="light"], .aurora-light {
  --surface-app:        var(--color-cool-gray);
  --surface-card:       var(--color-white);
  --surface-card-navy:  var(--color-white);
  --surface-row:        var(--color-white);

  --text-primary:       var(--color-black);
  --text-secondary:     var(--color-dark-gray);
  --text-muted:         var(--color-aurora-gray);
  --text-accent:        var(--color-aurora-blue);

  --interactive-primary:        var(--color-aurora-blue);
  --interactive-primary-hover:  var(--color-vivid-blue);
  --interactive-on-primary:     var(--color-white);
  --interactive-text:           var(--color-aurora-blue);
  --interactive-text-hover:     var(--color-vivid-blue);
  --interactive-disabled:       var(--color-light-gray);
  --focus-ring:                 var(--color-aurora-blue);

  --status-positive:    var(--color-green-dark);
  --status-negative:    var(--color-red-dark);
  --status-alert:       var(--color-yellow-dark);

  --border-subtle:      rgba(0, 0, 0, 0.08);
  --border-row:         rgba(0, 0, 0, 0.06);
}