/* ==========================================================================
   MentorWallet — Color tokens
   Source: MENTOR WALLET_manual de marca.pdf (COLORES)
   Core palette (from manual):
     Verde oscuro  #0D352E  Pantone 3435 C  — primary brand color
     Verde claro   #DDFFF0  Pantone 2253 C  — light mint tint
     Flúor         #74FFC4  Pantone 3375 C  — accent / highlight
     Azul claro    #E1F7FF  Pantone 290 C   — complementary tint
   Neutrals & extended ramps are harmonised around the dark-green hue.
   ========================================================================== */

:root {
  /* ---- Brand core (verbatim from the manual) ---------------------------- */
  --mw-green:        #0D352E;  /* verde oscuro — primary */
  --mw-mint:         #DDFFF0;  /* verde claro */
  --mw-fluor:        #74FFC4;  /* flúor — accent */
  --mw-sky:          #E1F7FF;  /* azul claro — complementary */
  --mw-white:        #FFFFFF;

  /* ---- Green ramp (primary hue, derived) -------------------------------- */
  --green-950: #07211C;  /* darkest — press states on dark */
  --green-900: #0D352E;  /* = brand verde oscuro */
  --green-800: #14463C;
  --green-700: #1C5A4D;
  --green-600: #277564;
  --green-500: #379079;
  --green-400: #5AAE97;
  --green-300: #8FCBB9;
  --green-200: #BEE3D7;
  --green-100: #DDFFF0;  /* = brand verde claro / mint */
  --green-50:  #EEFCF6;

  /* ---- Fluor ramp (accent) --------------------------------------------- */
  --fluor-600: #19C98C;  /* accessible fluor for text/links on light */
  --fluor-500: #34DD9F;
  --fluor-400: #51EDB0;
  --fluor-300: #74FFC4;  /* = brand flúor */
  --fluor-200: #A6FFDA;
  --fluor-100: #D4FFEE;

  /* ---- Sky ramp (complementary) ---------------------------------------- */
  --sky-400: #8FD9F2;
  --sky-300: #B5E8F8;
  --sky-200: #D2F1FB;
  --sky-100: #E1F7FF;  /* = brand azul claro */
  --sky-50:  #F2FBFF;

  /* ---- Neutrals (warm green-tinted greys) ------------------------------ */
  --neutral-900: #0E1A17;
  --neutral-800: #1E2B27;
  --neutral-700: #38453F;
  --neutral-600: #54635C;
  --neutral-500: #74837C;
  --neutral-400: #9AA8A1;
  --neutral-300: #C2CEC8;
  --neutral-200: #DDE6E1;
  --neutral-100: #EEF3F0;
  --neutral-50:  #F7FAF8;

  /* ---- Semantic — status ------------------------------------------------ */
  --status-positive: #19A06B;  /* gains / income — green family */
  --status-positive-surface: #E2F7EE;
  --status-warning:  #C98A12;
  --status-warning-surface: #FBF1DA;
  --status-negative: #C8443A;  /* spend / loss */
  --status-negative-surface: #FBE6E4;
  --status-info:     #2A7BB0;
  --status-info-surface: #E1F1FB;

  /* ---- Semantic aliases ------------------------------------------------- */
  --color-bg:            var(--mw-white);
  --color-bg-subtle:     var(--green-50);
  --color-bg-mint:       var(--mw-mint);
  --color-bg-sky:        var(--mw-sky);
  --color-bg-inverse:    var(--green-900);

  --surface-card:        var(--mw-white);
  --surface-raised:      var(--mw-white);
  --surface-sunken:      var(--neutral-50);
  --surface-mint:        var(--mw-mint);
  --surface-inverse:     var(--green-900);

  --text-strong:         var(--green-900);
  --text-body:           var(--neutral-800);
  --text-muted:          var(--neutral-500);
  --text-on-dark:        var(--mw-mint);
  --text-on-dark-muted:  var(--green-300);
  --text-on-accent:      var(--green-900);
  --text-link:           var(--fluor-600);

  --border-subtle:       var(--neutral-200);
  --border-default:      var(--neutral-300);
  --border-strong:       var(--green-900);
  --border-on-dark:      rgba(221, 255, 240, 0.16);

  --color-primary:           var(--green-900);
  --color-primary-hover:     var(--green-800);
  --color-primary-active:    var(--green-950);
  --color-primary-contrast:  var(--mw-mint);

  --color-accent:            var(--fluor-300);
  --color-accent-hover:      var(--fluor-400);
  --color-accent-active:     var(--fluor-500);
  --color-accent-contrast:   var(--green-900);

  --focus-ring:          0 0 0 3px rgba(116, 255, 196, 0.55);
}