/*
  Qualis Fidelis — Design tokens
  Fuente de los valores: instrucciones de marca del refactor multipágina
  (rama refactor/multipagina). No usar Tailwind: variables CSS puras,
  consumidas por assets/css/refactor.css y por cada página nueva.
*/

:root {
  /* Marca — Qualis (primario, interactivo, estados activos) */
  --color-qualis: #7d83c0;
  --color-qualis-hover: #5c629e;
  --color-qualis-muted: #9da1be; /* solo fondos/bordes/íconos: no cumple AA para texto chico */
  --color-qualis-container: #f2f3f9;

  /* Línea de negocio — Certificación de Productos */
  --color-producto: #822020;
  --color-producto-muted: #a48787; /* solo fondos/bordes/íconos: no cumple AA para texto chico */
  --color-producto-container: #fbf4f4;

  /* Línea de negocio — Sistemas de Gestión */
  --color-sistema: #484848;
  --color-sistema-muted: #878787; /* solo fondos/bordes/íconos: no cumple AA para texto chico */
  --color-sistema-container: #f5f5f5;

  /* Superficies y texto neutro */
  --color-surface: #ffffff;
  --color-surface-alt: #f8f9fa;
  --color-border: #e5e7eb;
  --color-text: #111827;
  --color-text-muted: #4b5563;

  /* Tipografía */
  --font-display: "Montserrat", sans-serif;
  --font-body: "Montserrat", sans-serif;

  /* Escala tipográfica (headings) */
  --text-display-lg: 56px;
  --text-display-lg-line: 62px;
  --text-display-lg-mobile: 38px;
  --text-display-lg-mobile-line: 44px;
  --text-headline-xl: 40px;
  --text-headline-xl-line: 48px;
  --text-headline-lg: 32px;
  --text-headline-lg-line: 40px;
  --text-headline-md: 24px;
  --text-headline-md-line: 32px;
  --text-headline-sm: 20px;
  --text-headline-sm-line: 28px;

  /* Escala tipográfica (body/label) */
  --text-body-lg: 18px;
  --text-body-lg-line: 28px;
  --text-body-md: 16px;
  --text-body-md-line: 24px;
  --text-body-sm: 14px;
  --text-body-sm-line: 20px;
  --text-label-lg: 14px;
  --text-label-md: 12px;

  /* Espaciado */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 3rem;
  --gutter: 1.5rem;
  --margin: 2rem;

  /* Radios */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-full: 9999px;

  /* Elevación */
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04), 0 6px 16px rgba(125, 131, 192, 0.06);
  --shadow-modal: 0 12px 32px rgba(17, 24, 39, 0.08);

  /* Ancho máximo de contenido */
  --content-max: 1360px;
}