:root {
  /* ========== TIPOGRAFÍA ========== */
  --font-heading: "Jost", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-body: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  /* Tamaños de fuente */
  --text-xs: 0.75em;      /* 12px */
  --text-sm: 0.875em;     /* 14px */
  --text-base: 1em;       /* 16px */
  --text-lg: 1.125em;     /* 18px */
  --text-xl: 1.25em;      /* 20px */
  --text-2xl: 1.5em;      /* 24px */
  --text-3xl: 1.875em;    /* 30px */
  --text-4xl: 2.25em;     /* 36px */
  --text-5xl: 3em;        /* 48px */

  /* ========== COLORES CORPORATIVOS ========== */
  /* Según GuiaIdentidadWeb.md - Sección 2: Paleta cromática */
  --color-black: #000000;
  --color-grey-300: #D3D3D3;  /* Gris claro - Para indicadores "no aplica" */
  --color-grey-600: #666666;  /* Gris oscuro - Para indicadores "igual" */
  --color-primary: #1963CE;
  --color-accent: #CC1D46;
  --color-white: #FFFFFF;

  /* ========== GRADIENTES ========== */
  /* Gradiente corporativo azul neutro */
  --gradient-primary: linear-gradient(135deg, #1963CE 0%, #0d4a9f 100%);
  /* Gradiente para fondo de pantalla - gris oscuro */
  --gradient-bg: linear-gradient(135deg, #4a4a4a 0%, #2d2d2d 100%);

  /* ========== COLORES SEMÁNTICOS ========== */
  --bg: var(--color-white);
  --text: var(--color-black);

  /* ========== ESPACIADOS ========== */
  --spacing-xs: 0.25rem;   /* 4px */
  --spacing-sm: 0.5rem;    /* 8px */
  --spacing-md: 1rem;      /* 16px */
  --spacing-lg: 1.5rem;    /* 24px */
  --spacing-xl: 2rem;      /* 32px */
  --spacing-2xl: 3rem;     /* 48px */

  /* ========== BORDES Y SOMBRAS ========== */
  --radius: 14px;
  --radius-sm: 8px;
  --radius-lg: 20px;
  --radius-full: 9999px;

  --shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.15);
  --shadow-primary: 0 4px 15px rgba(25, 99, 206, 0.3);
}

/* Ejemplo de uso:
body {
  font-family: var(--font-body);
  color: var(--text);
  background-color: var(--bg);
}

h1, h2, h3 {
  font-family: var(--font-heading);
  color: var(--color-primary);
}
*/