/* MaraLink — tokens del design system (guía de estilo v0.2, sección 14).
   Fuente de verdad en el código: src/app/globals.css */
@import url("https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,400..1000&family=Geist+Mono:wght@400;600&display=swap");

:root {
  /* Marca */
  --rosa: #ff90e8;
  --rosa-hover: #ffa3ec;
  --amarillo: #ffc900;
  --azul: #90a8ed;
  --crema: #faf4f0;
  --negro: #000000;
  --blanco: #ffffff;
  --grafito: #161616;

  /* Apoyo */
  --gris-superficie: #efeff0;
  --gris-texto: #5f646d;
  --gris-sobre-negro: #999999;
  --exito: #29cc6a;
  --error: #ff3b30;

  /* Gráficas (pendiente de validar, decisión 10) */
  --chart-1: #a81b86;
  --chart-2: #2f55c4;
  --chart-3: #b87a00;
  --chart-4: #008f72;
  --chart-5: #a070e0;

  /* Forma */
  --borde: 2px solid var(--grafito);
  --sombra-sm: 2px 2px 0 #000;
  --sombra: 4px 4px 0 #000;
  --sombra-lg: 8px 8px 0 #000;
  --sombra-sobre-negro: 4px 4px 0 var(--rosa);
  --pildora: 9999px;
  --radio-telefono: 24px;

  /* Tipografía */
  --fuente: "Roboto Flex", system-ui, sans-serif;
  --fuente-mono: "Geist Mono", ui-monospace, monospace;

  /* Espacio (múltiplos de 4 px) */
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 20px; --e6: 24px; --e8: 32px; --e12: 48px; --e16: 64px; --e24: 96px;
  --tactil: 48px;
  --tactil-escaner: 56px;
}