/* landing/css/tokens.css — copia sincronizada de brand/tokens.css para el sitio estático
   de la landing (brand/ no se despliega). Fuente de verdad: brand/tokens.css.
   Igual que tailwind.config.js, mantener en sincronía a mano si cambian los tokens. */
:root {
  /* Paleta de marca */
  --mp-black: #111111;
  --mp-white: #FFFFFF;
  --mp-gray-medium: #6E6E6E;
  --mp-gray-light: #9A9A9A;

  /* Grises de UI (bordes, fondos sutiles, hover) */
  --mp-ui-100: #F5F5F5;
  --mp-ui-200: #EDEDED;
  --mp-ui-300: #EEEEEE;
  --mp-ui-400: #EAEAEA;
  --mp-ui-500: #E4E4E4;
  --mp-ui-600: #DDDDDD;
  --mp-ui-700: #DBDBDB;
  --mp-ui-dark: #3A3A3A;
  --mp-ui-dark-line: #262626;

  /* Tipografía */
  --mp-font-sans: 'Space Grotesk', system-ui, sans-serif;
  --mp-font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* Escala de radios */
  --mp-radius-2xl: 14px;
  --mp-radius-xl: 12px;
  --mp-radius-lg: 10px;
  --mp-radius-DEFAULT: 9px;
  --mp-radius-md: 7px;
  --mp-radius-sm: 6px;
  --mp-radius-xs: 5px;
}