/* =========================================================
   Grupo WÖL — Design tokens v2026.1
   Dirección D · Monocromo. Fuente de verdad: tokens.json
   Dark-first: :root = oscuro. Claro: [data-theme="light"] o .invert
   ========================================================= */

:root{
  /* ---------- Primitivos ---------- */
  --wol-black:#000000;
  --wol-white:#FFFFFF;
  --wol-gray-50:#FAFAFA;
  --wol-gray-100:#F2F2F2;
  --wol-gray-200:#E5E5E5;
  --wol-gray-300:#D0D0D0;
  --wol-gray-400:#ABABAB;
  --wol-gray-500:#8A8A8A;
  --wol-gray-600:#6B6B6B;
  --wol-gray-700:#4D4D4D;
  --wol-gray-800:#2E2E2E;
  --wol-gray-900:#1A1A1A;
  --wol-gray-950:#0E0E0E;

  /* Funcionales (solo UI: formularios, estados. Nunca decorativos) */
  --wol-green-400:#4CC38A; --wol-green-700:#1E7A4C;
  --wol-red-400:#F2665E;   --wol-red-700:#C2362E;
  --wol-amber-400:#F0B44C; --wol-amber-700:#8A5A00;

  /* ---------- Roles · oscuro (default) ---------- */
  --bg:var(--wol-black);
  --surface:var(--wol-gray-950);
  --surface-2:var(--wol-gray-900);
  --border:rgba(255,255,255,.12);
  --border-strong:rgba(255,255,255,.40);
  --text:var(--wol-white);
  --text-muted:var(--wol-gray-300);   /* 13.6:1 sobre negro */
  --muted:var(--wol-gray-400);        /* 9.1:1 sobre negro */
  --primary:var(--wol-white);
  --primary-hover:var(--wol-gray-200);
  --on-primary:var(--wol-black);
  --accent:var(--wol-white);
  --accent-ink:var(--wol-black);
  --light:var(--wol-white);
  --on-light:var(--wol-black);
  --success:var(--wol-green-400);
  --danger:var(--wol-red-400);
  --warning:var(--wol-amber-400);
  --glow:rgba(255,255,255,.06);
  --focus:var(--wol-white);

  /* ---------- Tipografía ---------- */
  --display:'Archivo';
  --display-w:850;
  --display-style:italic;
  --display-stretch:125%;
  --display-track:-.02em;
  --em-font:'Archivo';
  --em-style:italic;
  --em-w:850;
  --body:'Inter Tight';
  --label:'Archivo';
  --label-stretch:125%;
  --font-stack:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  --fs-display:clamp(40px,6vw,72px);  --lh-display:.98;
  --fs-h1:clamp(32px,4.4vw,52px);     --lh-h1:1.02;
  --fs-h2:clamp(24px,3vw,34px);       --lh-h2:1.08;
  --fs-h3:22px;                       --lh-h3:1.2;
  --fs-lead:20px;                     --lh-lead:1.55;
  --fs-body:16px;                     --lh-body:1.65;
  --fs-small:13.5px;                  --lh-small:1.5;
  --fs-eyebrow:12px;                  --track-eyebrow:.24em;

  /* ---------- Espaciado (base 4) ---------- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px; --sp-10:128px;

  /* ---------- Forma ---------- */
  --r-sm:0px; --r-md:0px; --r-lg:0px; --r-btn:0px;  /* firma: esquinas rectas, como la diéresis del logo */
  --border-w:1px;

  /* ---------- Motion ---------- */
  --dur-fast:150ms; --dur-base:250ms; --dur-slow:450ms;
  --ease-out:cubic-bezier(.2,.7,.2,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
}

/* ---------- Roles · claro ---------- */
[data-theme="light"], .invert{
  --bg:var(--wol-white);
  --surface:var(--wol-gray-100);
  --surface-2:var(--wol-gray-200);
  --border:rgba(0,0,0,.10);
  --border-strong:rgba(0,0,0,.35);
  --text:var(--wol-black);
  --text-muted:var(--wol-gray-700);   /* 8.5:1 sobre blanco */
  --muted:var(--wol-gray-600);        /* 5.3:1 sobre blanco · no usar sobre gray-200 */
  --primary:var(--wol-black);
  --primary-hover:var(--wol-gray-800);
  --on-primary:var(--wol-white);
  --accent:var(--wol-black);
  --success:var(--wol-green-700);
  --danger:var(--wol-red-700);
  --warning:var(--wol-amber-700);
  --glow:rgba(0,0,0,.04);
  --focus:var(--wol-black);
}

@media (prefers-reduced-motion:reduce){
  :root{--dur-fast:0ms;--dur-base:0ms;--dur-slow:0ms}
}