/* Consentimiento Lead Verificado — design tokens. Fuente: skill `sistema-diseno` + design/verified_consent_ui_1/DESIGN.md.
   Tema SLATE / pizarra, marca "LegalSafe". Único lugar donde se definen colores, espacios,
   tipografía, radios y sombras. No usar valores a ojo ni style="..." inline (CSP estricta). */

/* ---------- Fuentes auto-alojadas (CSP: font-src 'self', sin Google Fonts/CDN) ----------
   Inter: texto y etiquetas (legibilidad en datos densos).
   Manrope: titulares (carácter, refinamiento). font-display: swap evita FOIT. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/inter-400.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/inter-500.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/inter-600.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/inter-700.woff2") format("woff2");
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/manrope-600.woff2") format("woff2");
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/manrope-700.woff2") format("woff2");
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/fonts/manrope-800.woff2") format("woff2");
}

:root {
  /* ---------- Color base — slate / pizarra, confianza institucional ----------
     Mapeo DESIGN.md -> tokens --cv-* (se conservan los nombres existentes). */
  --cv-bg:            #f7f9fb;   /* background / surface (DESIGN) */
  --cv-surface:       #ffffff;   /* surface-container-lowest (cards, inputs base) */
  --cv-surface-alt:   #f2f4f6;   /* surface-container-low (sub-superficie: code box, etc.) */
  --cv-border:        #c5c6cd;   /* outline-variant (bordes de tarjeta/lista) */
  --cv-border-soft:   #e0e3e5;   /* surface-variant (divisores tenues) */
  --cv-text:          #191c1e;   /* on-surface (AA sobre surface) */
  --cv-text-muted:    #44474c;   /* on-surface-variant */
  --cv-outline:       #75777d;   /* outline (iconografía secundaria, placeholders) */

  --cv-primary:       #334155;   /* primary slate (acción primaria, marca) */
  --cv-primary-text:  #ffffff;   /* on-primary */
  --cv-primary-hover: #1d2b3e;   /* slate más oscuro (hover) */
  --cv-primary-soft:  #eef1f5;   /* fondo tenue del icono/acento de marca */

  /* Sidebar oscura del panel (inverse-surface slate del DESIGN) */
  --cv-sidebar-bg:      #1d2b3e;   /* slate profundo (primary oscuro) */
  --cv-sidebar-text:    #b9c7e0;   /* inverse-primary: items inactivos */
  --cv-sidebar-muted:   #9eadc5;   /* on-primary-container: subtítulo/rol */
  --cv-sidebar-brand:   #ffffff;   /* marca LegalSafe */
  --cv-sidebar-hover:   #2d3b4f;   /* hover de item */
  --cv-sidebar-divider: #3a485c;   /* separador del pie */

  /* Estados / semáforo de la solicitud (color + texto + forma, nunca solo color).
     Se CONSERVAN los 8 colores semánticos (chips del panel). */
  --cv-pendiente:  #6b7280;
  --cv-enviado:    #2563eb;
  --cv-abierto:    #7c3aed;
  --cv-aceptado:   #15803d;
  --cv-rechazado:  #b91c1c;
  --cv-caducado:   #92733a;
  --cv-revocado:   #9333ea;
  --cv-exportado:  #0e7490;

  --cv-danger:     #ba1a1a;      /* error (DESIGN) */
  --cv-danger-bg:  #ffdad6;      /* error-container (fondo del icono de error) */
  --cv-focus:      #334155;      /* anillo de foco visible (slate) */

  /* Verde "Aceptado" para chips suaves del justificante (color + texto) */
  --cv-aceptado-bg:   #e7f6ee;
  --cv-aceptado-text: #047857;

  /* Espaciado (escala 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;

  /* Tipografía — Inter (texto) + Manrope (titulares), auto-alojadas; sistema como fallback */
  --cv-font:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --cv-font-head: "Manrope", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-xs: 12px; --fs-sm: 14px; --fs-base: 16px; --fs-lg: 18px;
  --fs-xl: 22px; --fs-2xl: 28px; --fs-3xl: 34px;

  /* Radios — slate restraint: 4px por defecto, 8px en tarjetas (DESIGN: rounded / rounded-lg) */
  --cv-radius:    8px;   /* tarjetas / contenedores agrupados */
  --cv-radius-sm: 4px;   /* inputs, botones, chips */
  --cv-radius-pill: 999px;

  /* Elevación: sombras muy suaves y neutras (DESIGN: depth por tonal layers + outline) */
  --cv-shadow: 0 1px 2px rgba(51,65,85,.05), 0 2px 4px rgba(51,65,85,.05);
}