/* Helios · tokens 1.0 · fuente: marca/tokens.json y MANUAL-DE-MARCA.md
   Sincronizado con el proyecto «Helios Design System» de claude.ai/design (tokens/*.css). */
:root {
  /* Paleta exacta */
  --crema: #F6F1E7;
  --tinta: #28374A;
  --oliva: #6B7051;
  --arena: #D3C7AD;
  --borgona: #701F28;

  /* Derivados medidos (no son colores de marca nuevos, son estados) */
  --tinta-hover: #1E2A3A;          /* botón principal :hover */
  --tinta-suave: rgba(40, 55, 74, .08);
  --tinta-linea: rgba(40, 55, 74, .22);
  --tinta-borde: rgba(40, 55, 74, .42);
  --texto-apoyo: #5A6675;          /* 5,6:1 sobre crema */
  --crema-panel: #EFE8D9;          /* crema tintada de arena para paneles */

  /* Semántica */
  --fondo: var(--crema);
  --texto: var(--tinta);
  --accion-fondo: var(--tinta);
  --accion-texto: var(--crema);
  --acento: var(--oliva);
  --superficie: var(--arena);
  --foco-claro: var(--borgona);
  --foco-oscuro: var(--crema);
  --error: var(--borgona);

  /* Tipografía (manual §5) */
  --serif: "DM Serif Display", Georgia, serif;
  --sans: "Manrope", Arial, sans-serif;
  --t-hero: clamp(44px, 2.75rem + 2.4vw, 72px);
  --t-seccion: clamp(34px, 2.125rem + 1.2vw, 48px);
  --t-sub: clamp(22px, 1.375rem + .2vw, 24px);
  --t-cuerpo: clamp(16px, 1rem + .18vw, 18px);
  --t-control: 15px;
  --t-apoyo: 13px;
  --lh-hero: 1.06;
  --lh-seccion: 1.12;
  --lh-sub: 1.3;
  --lh-cuerpo: 1.6;
  --lh-control: 1.4;
  --lh-apoyo: 1.5;
  --track-display: -0.015em;

  /* Espacio (4, 8, 12, 16, 24, 32, 48, 64, 96) */
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px;
  --e6: 32px; --e7: 48px; --e8: 64px; --e9: 96px;
  --contenedor: 1200px;
  --margen: 24px;
  --seccion: 56px;

  /* Forma e interacción */
  --radio-control: 8px;
  --radio-superficie: 12px;
  --objetivo: 44px;
  --foco-ancho: 3px;
  --foco-sep: 3px;
  --dur: 200ms;
  --curva: cubic-bezier(.16, 1, .3, 1);   /* salida exponencial, arranque visible */
}
@media (min-width: 768px) {
  :root { --margen: clamp(24px, 6vw, 64px); --seccion: clamp(56px, 8vw, 96px); }
}