:root{
  /* Colores principales */
  --brand-azul-marino: #0a2a43;
  --brand-azul-profundo: #103a5a;
  --brand-cian-emerald: #1f8a9e;
  --accent-rojo: #d22e2e;
  --accent-ambar: #ffc542;
  --gris-rato: #6b7280;
  --blanco: #ffffff;
  --gris-fondo: #f3f4f6;

  /* Mapeo a tokens globales */
  --bg: var(--gris-fondo);
  --bg-soft: var(--blanco);
  --text: #0b132b;
  --muted: var(--gris-rato);
  --brand-1: var(--brand-azul-marino);
  --brand-2: var(--brand-azul-profundo);
  --brand-3: var(--brand-cian-emerald);
  --accent-1: var(--accent-rojo);
  --accent-2: var(--accent-ambar);
}

html[data-theme="dark"]{
  --bg: #0b132b;
  --bg-soft: #111827;
  --text: #e5e7eb;
  --muted: #9ca3af;
}

/* Aplicacion visual */
.header{ background: color-mix(in hsl, var(--brand-1), transparent 70%); }
.hero{ background: linear-gradient(180deg, color-mix(in hsl, var(--brand-1), transparent 72%) 0%, transparent 45%); }
.btn-primary{ background: var(--brand-3); color: #fff; }
.btn-primary:hover{ filter: brightness(1.06); transform: translateY(-2px); }
.btn-ghost{ border-color: color-mix(in srgb, var(--brand-3), #000 10%); }
.badge{ background: color-mix(in srgb, var(--brand-2), #fff 80%); color: var(--brand-2); }