/* ============================================================
   MAGNI PREMIER · TOKENS
   Fuente única de verdad. El manual de marca, el kit de
   interfaz y la web beben de este archivo. Si un valor no
   está aquí, no existe.
   v1.0 · 2026
   ============================================================ */

:root{
  color-scheme: light;   /* decisión: la marca es light-first, sin modo oscuro */

  /* ---------- Color de marca ---------- */
  --negro:#1C1C1C;
  --grafito:#373A36;
  --naranja:#FE5000;
  --naranja-65:#FD8B56;
  --naranja-8:#FAEBE1;

  /* ---------- Neutros ---------- */
  --lino:#FAF9F5;      /* fondo principal */
  --arena:#ECEBE4;     /* bandas, tarjetas, superficies */
  --blanco:#FFFFFF;    /* solo texto sobre oscuro; nunca fondo */
  --linea:rgba(28,28,28,.13);
  --linea-inv:rgba(250,249,245,.16);

  /* ---------- Color semántico ----------
     Separado de la marca: el naranja es acción, nunca estado. */
  --error:#8E2F22;        /* ladrillo */
  --error-fondo:#EFE5E0;
  --aviso:#8A5A1E;        /* ámbar oscuro */
  --aviso-fondo:#F3ECE1;
  --ok:#1C1C1C;           /* el éxito se dice en negro: sobrio, no verde */
  --ok-fondo:var(--arena);
  --info:var(--grafito);
  --info-fondo:var(--arena);

  /* ---------- Tipografía ---------- */
  --display:"Instrument Serif",Georgia,serif;   /* hero y citas. Nada más. */
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  --t-hero:clamp(50px,9vw,120px);
  --t-h1:clamp(38px,5.4vw,64px);
  --t-h2:clamp(32px,4.6vw,54px);
  --t-h3:clamp(22px,2.6vw,30px);
  --t-h4:20px;
  --t-lede:24px;
  --t-cuerpo:17px;
  --t-menor:14px;
  --t-pie:13.5px;
  --t-micro:12.5px;

  --k-hero:-.015em;
  --k-titular:-.042em;
  --k-subtitulo:-.025em;
  --k-cuerpo:-.011em;
  --k-cita:-.022em;
  --k-pasaje:-.006em;   /* serif en pasaje largo: casi abierta */

  --l-hero:.94;
  --l-titular:1.04;
  --l-subtitulo:1.32;
  --l-cuerpo:1.6;
  --l-pie:1.42;

  --p-regular:400;
  --p-medio:500;
  --p-semi:600;
  --p-bold:700;

  /* ---------- Espaciado · escala de 8 ---------- */
  --sp-1:8px;  --sp-2:16px; --sp-3:24px;
  --sp-4:40px; --sp-5:64px; --sp-6:96px; --sp-7:128px;

  /* ---------- Retícula ---------- */
  --ancho-max:1180px;
  --ancho-texto:66ch;
  --canal:24px;
  --margen:40px;
  --margen-movil:24px;

  /* ---------- Forma ---------- */
  --r-pildora:999px;
  --r-caja:18px;
  --r-media:12px;
  --r-min:6px;

  /* ---------- Elevación ---------- */
  --e-0:none;
  --e-1:0 8px 20px -8px rgba(28,28,28,.18);            /* reposo */
  --e-2:0 10px 24px -6px rgba(28,28,28,.28);           /* elevado */
  --e-3:0 18px 40px -12px rgba(28,28,28,.34);          /* flotante */
  --e-4:0 30px 70px -20px rgba(28,28,28,.50);          /* modal */
  --e-negro:0 10px 24px -6px rgba(28,28,28,.38);
  --e-naranja:0 10px 24px -6px rgba(254,80,0,.42);
  --e-naranja-65:0 10px 24px -6px rgba(253,139,86,.45);

  --z-base:1; --z-sticky:100; --z-nav:200; --z-flotante:300;
  --z-velo:400; --z-modal:401; --z-aviso:500;

  /* ---------- Movimiento ---------- */
  --t-micro:180ms;
  --t-ui:250ms;
  --t-entrada:400ms;
  --curva:cubic-bezier(.22,.61,.36,1);
  --desfase:60ms;

  /* ---------- Interacción ---------- */
  --tap-min:44px;        /* área táctil mínima */
  --foco-int:2px;        /* anillo interior, color lino */
  --foco-ext:4px;        /* anillo exterior, color negro */
}

/* Foco visible sobre cualquier fondo, incluido el naranja:
   anillo doble claro/oscuro en vez de un solo anillo de color. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:none;
  box-shadow:0 0 0 var(--foco-int) var(--lino),
             0 0 0 var(--foco-ext) var(--negro);
  border-radius:var(--r-min);
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}