:root {
  /* Superficies */
  --color-surface: #FFFFFF;
  --color-surface-alt: #F4F5F6;
  --color-surface-inverse: #0A0C10;
  --color-surface-inverse-alt: #101419;

  /* Texto */
  --color-text: #101314;
  --color-text-secondary: #5C6365;
  --color-text-inverse: #FFFFFF;
  --color-text-inverse-secondary: #B9BEC7;
  --color-text-disabled: #9AA0A3;

  /* Bordes */
  --color-border: #DFE2E3;
  --color-border-strong: #101314;
  --color-border-inverse: #262B33;

  /* Acento (estructura, enlaces, "aporta") */
  --color-accent: #1F3FB0;          /* sobre claro  — 8.8:1 */
  --color-accent-hover: #16307F;
  --color-accent-inverse: #4D7CFF;  /* sobre oscuro — 5.3:1 */

  /* Énfasis (estado "lidera", segmento de endoso) */
  --color-emphasis: #C4531A;          /* sobre claro  — 4.6:1 */
  --color-emphasis-inverse: #E2701C;  /* sobre oscuro — 6.1:1 */

  /* Tipografía */
  --font-display: 'Archivo', system-ui, sans-serif;
  --font-body: 'Public Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* Escala tipográfica (ratio 1.25, base 16) */
  --text-xs: 10px;
  --text-sm: 12px;
  --text-base: 14px;
  --text-md: 17px;
  --text-lg: 22px;
  --text-xl: 34px;
  --text-2xl: 58px;

  /* Espaciado base 8 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 44px;
  --space-8: 64px;

  /* Geometría */
  --radius: 0px;               /* el sistema no usa esquinas redondeadas */
  --border-width: 1px;
  --content-max: 1240px;
}