/* ============================================================
   Éxito Proyectos — Design Tokens
   Fuente: Visual MS Design System (Biblioteca Visual.fig)
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face { font-family: "Inter"; src: url("../fonts/Inter-Light.ttf") format("truetype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }

@font-face { font-family: "Source Serif 4"; src: url("../fonts/SourceSerif4-Light.ttf") format("truetype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("../fonts/SourceSerif4-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("../fonts/SourceSerif4-Italic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("../fonts/SourceSerif4-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("../fonts/SourceSerif4-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("../fonts/SourceSerif4-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }

@font-face {
  font-family: "Material Symbols Outlined";
  src: url("../fonts/MaterialSymbolsOutlined.ttf") format("truetype");
  font-weight: 100 700;
  font-style: normal;
  font-display: block;
}
.material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

:root {
  /* ============================================================
     Colores de marca Visual MS
     ============================================================ */

  /* Valores de marca (cuatro pilares) */
  --vms-personas:            #FA6216;
  --vms-personas-medio:      #D76328;
  --vms-personas-claro:      #FBE5D6;

  --vms-rentabilidad:        #76BD1F;
  --vms-rentabilidad-medio:  #7AA64B;
  --vms-rentabilidad-claro:  #E6EFD7;

  --vms-verde:               #7BAE51;
  --vms-verde-medio:         #628B41;
  --vms-verde-claro:         #E5EFDC;

  --vms-diseno:              #5FD3B8;
  --vms-diseno-medio:        #498A75;
  --vms-diseno-claro:        #D6EAE4;

  --vms-tecnologia:          #4680E1;
  --vms-tecnologia-medio:    #4A83B5;
  --vms-tecnologia-claro:    #D6E2EC;

  /* Acentos */
  --vms-amarillo:  #FFB31D;
  --vms-violeta:   #7070FF;
  --vms-rojo:      #F94339;

  /* Oscuros */
  --vms-negro-neutro:           #191919;
  --vms-negro-visualms:         #1B1918;
  --vms-oscuro-personas:        #2B1408;
  --vms-oscuro-rentabilidad:    #192310;
  --vms-oscuro-diseno:          #12211D;
  --vms-oscuro-tecnologia:      #0F1C24;
  --vms-oscuro-violeta:         #151221;
  --vms-oscuro-rojo:            #2A0B09;
  --vms-oscuro-000:             #1B1918;

  /* Blancos / claros */
  --vms-blanco:              #FFFFFF;
  --vms-blanco-visualms:     #FBFAF9;
  --vms-blanco-calido:       #FAFCF8;
  --vms-crema:               #FBFAF9;
  --vms-crema-2:             #F3F2F1;
  --vms-crema-3:             #FBFAF9;
  --vms-claro:               #E9EAEC;
  --vms-gris-50:             #F9FBFB;
  --vms-gris-100:            #E9EAEC;
  --vms-gris-200:            #DCDCDC;
  --vms-gris-300:            #B7B7B7;
  --vms-gris-400:            #8A8A8A;
  --vms-gris-500:            #4D4D4D;
  --vms-gris-600:            #363330;
  --vms-gris-700:            #1B1918;

  /* Fondos profundos */
  --vms-verde-profundo:  #263F40;
  --vms-azul-profundo:   #1D3749;

  /* ============================================================
     Tokens semánticos de la aplicación
     ============================================================ */

  /* Color primario de producto (teal) */
  --primary:        var(--vms-diseno);
  --primary-medio:  var(--vms-diseno-medio);
  --primary-claro:  var(--vms-diseno-claro);
  --primary-oscuro: var(--vms-oscuro-diseno);

  /* Estados */
  --color-ok:       var(--vms-rentabilidad);
  --color-ok-bg:    var(--vms-rentabilidad-claro);
  --color-warn:     var(--vms-amarillo);
  --color-warn-bg:  #FFF3D6;
  --color-err:      #D2352D;
  --color-err-bg:   #F3D5D3;
  --color-info:     var(--vms-tecnologia);
  --color-info-bg:  var(--vms-tecnologia-claro);

  /* Fondo / superficie */
  --bg:         var(--vms-crema);
  --bg-alt:     var(--vms-blanco-calido);
  --bg-card:    var(--vms-blanco);
  --bg-input:   var(--vms-crema-3);
  --bg-dark:    var(--vms-oscuro-000);
  --bg-sidebar: var(--vms-oscuro-000);

  /* Texto */
  --fg:         var(--vms-gris-700);
  --fg-muted:   var(--vms-gris-500);
  --fg-subtle:  var(--vms-gris-400);
  --fg-on-dark: var(--vms-crema);

  /* Bordes */
  --border:         #CFCCC9;
  --border-strong:  var(--vms-gris-600);
  --border-subtle:  #E3E3E3;

  /* ============================================================
     Tipografía
     ============================================================ */
  --font-display: "Source Serif 4", Georgia, serif;
  --font-sans:    "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-ui:      "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --fs-impacto-1:    104px;
  --fs-impacto-2:    84px;
  --fs-titulo-1:     46px;
  --fs-titulo-2:     40px;
  --fs-encabezado-1: 32px;
  --fs-encabezado-2: 28px;
  --fs-encabezado-3: 22px;
  --fs-subtitulo-1:  20px;
  --fs-subtitulo-2:  18px;
  --fs-body-1:       16px;
  --fs-body-2:       14px;
  --fs-pie:          13px;
  --fs-micro:        10px;

  --lh-tight:  1.05;
  --lh-snug:   1.2;
  --lh-normal: 1.35;
  --lh-body:   1.5;

  /* ============================================================
     Espaciado (base 4px)
     ============================================================ */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;

  /* Radios */
  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   20px;
  --r-pill: 999px;

  /* Sombras */
  --sh-1:    0 1px 2px rgba(0,0,0,0.06);
  --sh-2:    0 4px 4px rgba(0,0,0,0.08);
  --sh-3:    0 8px 24px rgba(0,0,0,0.12);
  --sh-card: 0 4px 4px rgba(0,0,0,0.25);

  /* Focus ring */
  --ring: 0 0 0 2px var(--primary);

  /* ============================================================
     Tema dinámico por proyecto (se sobreescribe desde JS)
     ============================================================ */
  --project-primary:       var(--vms-diseno);
  --project-primary-medio: var(--vms-diseno-medio);
  --project-primary-claro: var(--vms-diseno-claro);
  --project-primary-oscuro:var(--vms-oscuro-diseno);
  --project-fg:            var(--vms-oscuro-diseno);
}

/* ============================================================
   Resets y defaults globales
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  color: var(--fg);
  background: var(--bg);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-size: var(--fs-body-1);
  line-height: var(--lh-body);
  font-weight: 300;
  letter-spacing: -0.005em;
}

/* ============================================================
   Utilidades tipográficas
   ============================================================ */
.vms-encabezado-1 { font-family: var(--font-sans);    font-weight: 400; font-size: var(--fs-encabezado-1); line-height: var(--lh-snug); }
.vms-encabezado-2 { font-family: var(--font-sans);    font-weight: 500; font-size: var(--fs-encabezado-2); line-height: var(--lh-snug); }
.vms-encabezado-3 { font-family: var(--font-sans);    font-weight: 500; font-size: var(--fs-encabezado-3); line-height: var(--lh-snug); }
.vms-subtitulo-1  { font-family: var(--font-sans);    font-weight: 400; font-size: var(--fs-subtitulo-1);  line-height: var(--lh-normal); }
.vms-subtitulo-2  { font-family: var(--font-sans);    font-weight: 400; font-size: var(--fs-subtitulo-2);  line-height: var(--lh-normal); }
.vms-body-1       { font-family: var(--font-sans);    font-weight: 300; font-size: var(--fs-body-1);       line-height: var(--lh-body); }
.vms-body-2       { font-family: var(--font-sans);    font-weight: 300; font-size: var(--fs-body-2);       line-height: var(--lh-body); }
.vms-body-1-enf   { font-family: var(--font-sans);    font-weight: 500; font-size: var(--fs-body-1);       line-height: var(--lh-body); }
.vms-pie          { font-family: var(--font-sans);    font-weight: 400; font-size: var(--fs-pie);          line-height: var(--lh-body); letter-spacing: 0.01em; color: var(--fg-muted); }
.vms-eyebrow      { font-family: var(--font-sans);    font-weight: 400; font-size: var(--fs-micro);        line-height: 1; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-muted); }
.vms-serif        { font-family: var(--font-display); font-weight: 300; }
.vms-serif-italic { font-family: var(--font-display); font-weight: 400; font-style: italic; }