/* ===========================================================================
   JD Yuversity — Color tokens
   Source: Brandbook JD Yuversity (Color section)
     Verde Principal  #1e5c5c
     Verde secundario #43bfb9
     Gris             #333333
     Blanco como color base de fondos (white dominant, light tones)
   =========================================================================== */

:root {
  /* --- Base palette ------------------------------------------------------ */
  --white: #ffffff;
  --black: #0e1413;

  /* Brand greens (built around Verde Principal) */
  --green-deep:    #143f3d; /* darker forest — covers, gradients */
  --green-primary: #1e5c5c; /* Verde Principal */
  --green-600:     #2a7270;
  --green-500:     #3a8b86;
  --teal-aqua:     #43bfb9; /* Verde secundario */
  --teal-300:      #7ed3ce;
  --teal-200:      #aee2df;
  --teal-100:      #d6f0ee;
  --teal-50:       #eef8f7;

  /* Neutral grays (built around Gris #333333) */
  --gray-900: #222423;
  --gray-800: #333333; /* Gris de marca */
  --gray-700: #4a4d4c;
  --gray-600: #6b6f6e;
  --gray-500: #8b908e;
  --gray-400: #aeb2b0;
  --gray-300: #d3d6d4;
  --gray-200: #e6e9e7;
  --gray-100: #f0f2f1;
  --gray-50:  #f7f9f8;

  /* --- Semantic aliases --------------------------------------------------- */
  --brand:            var(--green-primary);
  --brand-deep:       var(--green-deep);
  --brand-accent:     var(--teal-aqua);

  --text-strong:      var(--gray-900);
  --text-body:        var(--gray-800);
  --text-muted:       var(--gray-600);
  --text-faint:       var(--gray-500);
  --text-on-dark:     var(--white);
  --text-on-dark-dim: rgba(255, 255, 255, 0.72);
  --text-link:        var(--green-primary);

  --surface-page:     var(--white);
  --surface-subtle:   var(--gray-50);
  --surface-card:     var(--white);
  --surface-sunken:   var(--gray-100);
  --surface-dark:     var(--green-deep);
  --surface-brand:    var(--green-primary);
  --surface-accent:   var(--teal-50);

  --border:           var(--gray-200);
  --border-strong:    var(--gray-300);
  --border-brand:     var(--teal-200);
  --border-on-dark:   rgba(255, 255, 255, 0.16);

  /* Highlight ("resaltados") — brand prescribes a green→aqua gradient */
  --highlight:          var(--teal-aqua);
  --gradient-brand:     linear-gradient(100deg, var(--green-primary) 0%, var(--teal-aqua) 100%);
  --gradient-deep:      linear-gradient(160deg, var(--green-deep) 0%, var(--green-primary) 100%);
  --gradient-text:      linear-gradient(100deg, var(--green-primary) 10%, var(--teal-aqua) 90%);

  /* Status (derived, kept on-brand) */
  --success: #2f9e6f;
  --warning: #c9913a;
  --danger:  #c5544b;
  --info:    var(--teal-aqua);

  --focus-ring: color-mix(in srgb, var(--teal-aqua) 55%, transparent);
}