/* Tokens del Design System CSR v2 */
:root {
  /* Cian institucional (tope aprobado: 600) */
  --cyan-50: #EAF7FE;
  --cyan-100: #CDEEFC;
  --cyan-200: #9BDDF8;
  --cyan-500: #00AEEF;
  --cyan-600: #0089BE;
  --cyan-25: #F0F8FE;   /* tinte usado en gradientes del sitio */

  /* Magenta institucional (tope aprobado: 600) */
  --mag-50: #FDF0F8;
  --mag-100: #FBD8EE;
  --mag-200: #F79FD5;
  --mag-500: #EC2CA8;
  --mag-600: #C41D8A;
  --mag-25: #FDF2F9;    /* tinte usado en gradientes del sitio */

  /* Tinta y neutros */
  --white: #FFFFFF;
  --canvas: #F6FAFD;
  --gray-100: #EEF3F8;
  --border-200: #E6EEF5;
  --gray-300: #C7D0DA;
  --gray-400: #8A929E;
  --gray-500: #656D79;
  --gray-600: #4A515B;
  --gray-800: #28303A;
  --ink: #101820;

  /* Semanticos */
  --ok: #0B6B43;    --ok-bg: #EDFAF3;
  --warn: #8A5300;  --warn-bg: #FFF6E8;
  --error: #A8202A; --error-bg: #FEF0F1;
  --info: #0B5E80;  --info-bg: #EAF7FE;

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

  /* Radios */
  --radius-sm: 8px;  --radius-md: 14px; --radius-lg: 22px;
  --radius-xl: 32px; --radius-pill: 999px;

  /* Tipografia */
  --font-display: 'Manrope', sans-serif;
  --font-body: 'IBM Plex Sans', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  --content-width: 1180px;
}