/* ============================================================
   INNER WORTH — Universo Cromático
   Hierarchy (from the brand workbook):
     · NEUTROS    50%  → ink (#111111) + mint (#F1FEF7)
     · PRINCIPALES 35% → navy (#000080) + emerald (#51C878)
     · ACENTO     15%  → lime (#E5F83A)
   Scales are oklch-harmonised around each brand hue.
   ============================================================ */

:root {
  /* ---- BRAND CORE ------------------------------------------- */
  --navy:      #000080;   /* Azul marino — principal      */
  --emerald:   #51C878;   /* Verde esmeralda — principal  */
  --ink:       #111111;   /* Negro — neutro               */
  --mint:      #F1FEF7;   /* Blanco menta — neutro        */
  --lime:      #E5F83A;   /* Amarillo lima — acento (15%) */

  /* ---- NAVY scale ------------------------------------------- */
  --navy-900:  #00004d;
  --navy-700:  #000080;
  --navy-500:  #1a1aa6;
  --navy-300:  #6f6fce;
  --navy-100:  #d9d9f2;
  --navy-050:  #eeeefb;

  /* ---- EMERALD scale ---------------------------------------- */
  --emerald-700: #2f9e5c;
  --emerald-500: #51C878;
  --emerald-300: #8fdcaa;
  --emerald-100: #d3f1de;
  --emerald-050: #eafaf0;

  /* ---- LIME scale (accent) ---------------------------------- */
  --lime-600:  #c4d617;
  --lime-500:  #E5F83A;
  --lime-200:  #f4fcaa;

  /* ---- NEUTRALS (ink → mint) -------------------------------- */
  --ink-900:   #111111;
  --ink-700:   #2b2b30;
  --ink-500:   #54545c;
  --ink-300:   #8a8a93;
  --ink-200:   #b9b9c0;
  --ink-100:   #e3e3e8;
  --ink-050:   #f2f2f5;
  --mint-bg:   #F1FEF7;
  --white:     #ffffff;

  /* ---- SEMANTIC --------------------------------------------- */
  --bg:           var(--mint);
  --bg-alt:       var(--white);
  --bg-invert:    var(--ink);
  --bg-brand:     var(--navy);
  --surface:      var(--white);
  --surface-sunk: var(--ink-050);

  --fg1:          var(--ink-900);   /* primary text             */
  --fg2:          var(--ink-500);   /* secondary text           */
  --fg3:          #6c6c76;          /* muted/captions — ≥4.5:1 sobre mint/blanco (WCAG AA) */
  /* Lima para TEXTO: oscurecida para contraste; barras/fondos siguen usando --lime(-600) */
  --lime-text:    #7d8a0e;
  --fg-invert:    var(--mint);      /* text on dark/navy        */
  --fg-on-brand:  #ffffff;

  --accent:       var(--navy);
  --accent-2:     var(--emerald);
  --accent-pop:   var(--lime);
  --link:         var(--navy);
  --ink-accent:   var(--navy);      /* heading emphasis hue     */

  --border:        var(--ink-100);
  --border-strong: var(--ink-200);
  --focus-ring:    var(--navy-500);

  --success:      var(--emerald-700);
  --highlight:    var(--lime);

  /* CTA energy color (tweakable in product) */
  --cta:     var(--navy);
  --cta-fg:  #ffffff;
}

/* ============================================================
   DARK MODE — remaps neutrals only; brand hues stay.
   Toggle via html.dark.
   ============================================================ */
html.dark {
  --mint:        #0b1020;
  --mint-bg:     #0b1020;
  --white:       #141a2e;
  --bg:          #0b1020;
  --bg-alt:      #141a2e;
  --surface:     #141a2e;
  --surface-sunk:#1b2238;
  --fg1:         #f1fef7;
  --fg2:         #c2c7da;
  --fg3:         #8b90a8;
  --border:        rgba(255,255,255,.10);
  --border-strong: rgba(255,255,255,.20);
  --navy-050:    #1a2142;
  --navy-100:    #cdd2f0;
  --emerald-050: #122a1e;
  --ink-050:     #141a2e;
  --ink-100:     rgba(255,255,255,.12);
  --link:        var(--emerald-300);
  --ink-accent:  var(--emerald-300);
}