/* ============================================================
   Mayores Vida — tokens canónicos del sistema de diseño.
   Cargado desde /index.html antes que el bundle de Vite, así
   los tokens están disponibles inmediatamente (sin FOUC) y
   sobreviven a un bundle cacheado o un rebuild a medio aplicar.

   El bundle (frontend/src/styles/global.css) mantiene un MIRROR
   de estos valores: ambos archivos DEBEN coincidir.
   ============================================================ */

:root {
  /* ─── Paleta corporativa ────────────────────────────────── */
  --mv-navy:        #0F3C7A;
  --mv-navy-700:    #0B2E60;
  --mv-navy-50:     #EEF3FB;
  --mv-verde:       #0F766E;
  --mv-verde-50:    #ECFDF5;
  --mv-rojo:        #B42318;
  --mv-rojo-50:     #FEF2F2;
  --mv-ambar:       #B45309;
  --mv-ambar-50:    #FEF3C7;
  --mv-ink:         #0B1220;
  --mv-slate-700:   #334155;
  --mv-slate-500:   #64748B;
  --mv-slate-400:   #94A3B8;
  --mv-slate-300:   #CBD5E1;
  --mv-slate-200:   #E2E8F0;
  --mv-slate-100:   #F1F5F9;
  --mv-paper:       #F4F5F7;
  --mv-white:       #FFFFFF;

  /* ─── Semánticos ────────────────────────────────────────── */
  --brand-primary:  var(--mv-navy);
  --brand-accent:   var(--mv-verde);
  --text-primary:   var(--mv-ink);
  --text-strong:    var(--mv-ink);
  --text-muted:     var(--mv-slate-500);
  --bg-app:         var(--mv-paper);
  --bg-card:        var(--mv-white);
  --border-soft:    #EDEFF2;
  --border-inner:   #EEF0F3;

  /* Pasteles de los avatares de ficha, uno por módulo (ver global.css). */
  --av-azul-bg:     #DEE9F9;
  --av-verde-bg:    #D5EFE9;
  --av-naranja-bg:  #FBE6CB;
  --av-morado-bg:   #E7DDF8;
  --av-morado-fg:   #6D28D9;
  --av-rojo-bg:     #FADFDC;
  --border:         var(--border-soft);
  --bg-soft:        #FAFBFC;

  /* ─── Tipografía ─────────────────────────────────────────── */
  --ff-display:     "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  --ff-body:        "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  --ff-mono:        "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-display:   var(--ff-display);
  --font-body:      var(--ff-body);
  --font:           var(--ff-body);
  --ls-display:     -0.025em;
  --ls-body:        0;
  --ls-wide:        .12em;

  /* ─── Radios y sombras ──────────────────────────────────── */
  --r-card:         14px;
  --r-ctrl:         8px;
  --r-pill:         999px;
  --sh-card:        none;
  --sh-hover:       0 2px 8px rgba(15,23,42,.06);
  --sh-pop:         0 10px 30px rgba(15,23,42,.12);
  --shadow-sm:      var(--sh-card);

  /* ─── Layout shell ──────────────────────────────────────── */
  --sidebar-w:           208px;
  --sidebar-w-collapsed: 56px;
  --topbar-h:            64px;

  /* ─── Accent legacy ─────────────────────────────────────── */
  --accent:         var(--brand-primary);
  --accent-2:       var(--brand-accent);
  --accent-d:       var(--mv-navy-700);
  --accent-bg:      var(--mv-navy-50);
  --accent-ring:    rgba(15,60,122,.10);
  --accent-shadow:  rgba(15,60,122,.45);

  --shimmer:        linear-gradient(90deg, #F1F5F9 0%, #E2E8F0 50%, #F1F5F9 100%);

  /* ─── Tokens legacy (escala neutra slate) ────────────────
     Usados por componentes anteriores al sistema --mv-* (entre
     ellos toda la pantalla de Valoración y partes de la gestoría).
     Se mantienen hasta migrar los consumidores. */
  --s0: var(--mv-paper);          /* #F8FAFC */
  --s1: var(--mv-slate-100);      /* #F1F5F9 */
  --s2: var(--mv-slate-200);      /* #E2E8F0 */
  --s3: var(--mv-slate-300);      /* #CBD5E1 */
  --s5: var(--mv-slate-500);      /* #64748B */
  --s7: var(--mv-slate-700);      /* #334155 */
  --s9: var(--mv-ink);            /* #0B1220 */

  /* Primario (navy). */
  --pri: var(--mv-navy);
  --prl: var(--mv-navy-50);
  --prd: var(--mv-navy-700);

  /* Secundario (verde Persia). */
  --sec: var(--mv-verde);
  --sel: var(--mv-verde-50);

  /* Rojo destructivo. */
  --r:   #DC2626;
  --rl:  #FEE2E2;
  --rc:  #991B1B;

  /* Verde de estado positivo (más oscuro que --sec para contraste sobre bg). */
  --g:   #15803D;
  --gl:  #DCFCE7;
  --gc:  #166534;

  /* Ámbar warning. */
  --am:  var(--mv-ambar);
  --aml: #FEF3C7;
  --ac:  #92400E;

  /* Radius por defecto de controles legacy. */
  --rd: 10px;

  /* Aliases semánticos puntuales. */
  --red:          var(--mv-rojo);
  --red-bg:       #FEE2E2;
  --red-border:   #FCA5A5;
  --green:        #15803D;
  --green-bg:     #DCFCE7;
  --green-border: #BBF7D0;
  --amber:        var(--mv-ambar);
  --amber-bg:     #FEF3C7;
  --purple:       #6D28D9;
  --purple-bg:    #F3E8FF;
}