/* ────────────────────────────────────────────────────────────────────
   LEX App — Design Tokens
   Tipografía y color para soluciones jurídicas digitales.
   Construido sobre el sistema visual Metronic v9.4.4 y refinado
   con la identidad LEX (azul cielo + verde-menta tecnológico).
   ──────────────────────────────────────────────────────────────────── */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

:root {
  /* ── Marca / Brand ──────────────────────────────────────────────── */
  --lex-blue:        #40A0F0;   /* azul logo principal */
  --lex-blue-deep:   #1B84FF;   /* azul de acción (CTA) — Metronic primary */
  --lex-blue-dark:   #1379F0;   /* azul hover / pressed */
  --lex-blue-soft:   #EEF6FF;   /* fondo de aviso azul */
  --lex-mint:        #60D0D0;   /* verde-menta logo */
  --lex-mint-deep:   #2DC4B6;
  --lex-mint-soft:   #E7F8F6;
  --lex-ink:         #16151E;   /* azul-tinta sidebar / encabezados oscuros */

  /* ── Primary / acción ───────────────────────────────────────────── */
  --primary:         var(--lex-blue-deep);
  --primary-hover:   var(--lex-blue-dark);
  --primary-active:  #0F6BD9;
  --primary-light:   #EEF6FF;
  --primary-on:      #FFFFFF;

  /* ── Tipografía: foreground ─────────────────────────────────────── */
  --fg-1:            #2C2D30;   /* texto principal */
  --fg-2:            #4B5675;   /* texto secundario / etiquetas */
  --fg-3:            #676A72;   /* texto de soporte */
  --fg-4:            #8E9198;   /* placeholder / muted */
  --fg-5:            #B5B7C8;   /* texto deshabilitado */
  --fg-inverse:      #FFFFFF;

  /* ── Fondos / surfaces ──────────────────────────────────────────── */
  --bg-page:         #F9F9F9;
  --bg-card:         #FFFFFF;
  --bg-subtle:       #F4F4F4;
  --bg-hover:        #F1F1F4;
  --bg-active:       #EEEEEE;
  --bg-overlay:      rgba(22, 21, 30, 0.40);

  /* ── Bordes ─────────────────────────────────────────────────────── */
  --border-1:        #F1F1F4;   /* divisor sutil */
  --border-2:        #DBDFE9;   /* borde estándar (inputs, cards) */
  --border-3:        #DDDDDD;
  --border-strong:   #B5B7C8;

  /* ── Semánticos ─────────────────────────────────────────────────── */
  --success:         #17C653;
  --success-soft:    #EAFFF1;
  --success-fg:      #04B440;
  --warning:         #F6C000;
  --warning-soft:    #FFF8DD;
  --warning-fg:      #B47900;
  --danger:          #F8285A;
  --danger-soft:     #FFEEF3;
  --danger-fg:       #D81A48;
  --info:            var(--lex-blue);
  --info-soft:       #E9F3FF;

  /* ── Sidebar / modo oscuro ──────────────────────────────────────── */
  --dark-bg:         #16151E;
  --dark-bg-2:       #1B1C22;
  --dark-bg-3:       #26272F;
  --dark-fg-1:       #FFFFFF;
  --dark-fg-2:       #9A9CAE;
  --dark-border:     #26272F;

  /* ── Tipografía: familias ───────────────────────────────────────── */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Inter", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ── Escala tipográfica (Metronic-compat) ───────────────────────── */
  --text-2xs:  10px;
  --text-xs:   11px;
  --text-sm:   12px;
  --text-base: 13px;   /* base UI Metronic */
  --text-md:   14px;
  --text-lg:   15px;
  --text-xl:   16px;
  --text-2xl:  18px;
  --text-3xl:  22px;
  --text-4xl:  26px;
  --text-5xl:  38px;
  --text-6xl:  50px;

  /* ── Pesos ──────────────────────────────────────────────────────── */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-bold:    700;
  --weight-black:   800;

  /* ── Espaciado (4-grid) ─────────────────────────────────────────── */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ── Radios ─────────────────────────────────────────────────────── */
  --radius-xs:  4px;
  --radius-sm:  6px;   /* botones */
  --radius:     7px;   /* alertas, badges grandes */
  --radius-md:  8px;
  --radius-lg:  12px;  /* cards */
  --radius-xl:  16px;
  --radius-full: 9999px;

  /* ── Sombras ────────────────────────────────────────────────────── */
  --shadow-xs: 0 1px 2px 0 rgba(0,0,0,0.03);
  --shadow-sm: 0 1px 3px 0 rgba(0,0,0,0.04), 0 1px 2px -1px rgba(0,0,0,0.03);
  --shadow:    0 4px 12px -2px rgba(0,0,0,0.04), 0 1px 2px 0 rgba(0,0,0,0.03);
  --shadow-md: 0 10px 24px -8px rgba(15,23,42,0.10), 0 4px 8px -4px rgba(15,23,42,0.04);
  --shadow-lg: 0 24px 48px -12px rgba(15,23,42,0.18);
  --shadow-focus: 0 0 0 3px rgba(27,132,255,0.18);
}

/* ────────────────────────────────────────────────────────────────────
   Estilos base (semánticos)
   ──────────────────────────────────────────────────────────────────── */

html, body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: 1.5;
  color: var(--fg-1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: var(--weight-bold);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--fg-1);
}
h2, .h2 {
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--fg-1);
}
h3, .h3 {
  font-size: var(--text-3xl);
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  color: var(--fg-1);
}
h4, .h4 {
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  line-height: 1.35;
  color: var(--fg-1);
}
h5, .h5 {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: 1.4;
  color: var(--fg-1);
}
h6, .h6 {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  line-height: 1.4;
  color: var(--fg-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

p {
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--fg-2);
}

small, .text-small { font-size: var(--text-sm); color: var(--fg-3); }
.eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--fg-4);
}

code, kbd, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.95em;
}

a {
  color: var(--primary);
  text-decoration: none;
}
a:hover { color: var(--primary-hover); text-decoration: underline; }