/* Tokens v2.0 — TEMA CLARO como base (decisión D-006, opción B) + banda oscura puntual (.on-dark).
   Estructura y tipografía heredadas de la referencia (recursos.skilio.com); la paleta clara es derivada y
   fue aprobada por el usuario tras comparar la muestra oscuro/claro. Todos los textos cumplen ≥ 4.5:1.
   Las familias se declaran en fonts.css (autoalojadas): cargarlo ANTES que este fichero. */
:root{
  /* Superficies y texto (papel cálido + tinta) */
  --bg:#F6F3EC; --bg-2:#EFEBE2;
  --ink:#15171B;        /* 16.2:1 sobre --bg */
  --ink-soft:#4B4F58;   /*  7.4:1 */
  --ink-muted:#666A73;  /*  4.9:1 */
  --line:rgba(21,23,27,.10); --line-strong:rgba(21,23,27,.18);

  /* Acentos: bronce (principal) y cobre (detalle) */
  --accent:#7A5C1E;       /* 5.6:1 sobre --bg; 6.2:1 sobre blanco */
  --accent-warm:#A5672B;  /* 4.1:1: SOLO iconos y detalles gráficos, nunca texto */
  --accent-tint:rgba(122,92,30,.08); --accent-border:rgba(122,92,30,.28);

  /* Superficies derivadas */
  --surface-1:rgba(21,23,27,.025);  /* tarjetas anidadas, tablas, diagramas, chips */
  --surface-2:rgba(21,23,27,.04);   /* hover de filas y elementos secundarios */
  --card-bg:#FFFFFF;
  --shadow-card:0 1px 2px rgba(21,23,27,.05),0 18px 40px -24px rgba(21,23,27,.22);
  --glow:radial-gradient(closest-side at 12% 0%,rgba(122,92,30,.07),transparent 70%);

  /* Estado (uso funcional, no decorativo; ≥ 4.5:1 sobre --bg) */
  --ok:#2F7D3A; --danger:#B3261E; --info:#1F6F78;

  /* Forma */
  --radius:22px; --radius-sm:12px; --radius-pill:999px;
  --container:1180px; --container-wide:1280px; --gutter:36px; --gutter-sm:22px;

  /* Tipografía */
  --font-display:'Fraunces','Times New Roman',serif;   /* titulares, peso 400 */
  --font-sans:'Inter',system-ui,-apple-system,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;  /* kickers, etiquetas, crédito */
  --fs-h1:clamp(32px,5.6vw,72px);
  --fs-h2:clamp(28px,3.4vw,44px);
  --fs-h3:clamp(20px,2vw,26px);
  --fs-body:clamp(15px,1.3vw,17px);
  --fs-label:12px;   /* mínimo para mono en mayúsculas (la referencia usa 10.5px: ilegible) */

  /* Movimiento */
  --ease-out-quint:cubic-bezier(.22,1,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
}

/* Banda oscura puntual (hero opcional, CTA final): añadir la clase .on-dark al contenedor.
   Redefine los valores base; los alias de abajo se recalculan dentro de la banda. */
.on-dark{
  --bg:#101418; --bg-2:#0d0e11;
  --ink:#f1ece1; --ink-soft:#a39d92; --ink-muted:#8a857b;   /* 5.0:1 sobre --bg de la banda */
  --line:rgba(241,236,225,.08); --line-strong:rgba(241,236,225,.16);
  --accent:#d8c9a3; --accent-warm:#c89b6c;
  --accent-tint:rgba(216,201,163,.10); --accent-border:rgba(216,201,163,.22);
  --surface-1:rgba(255,255,255,.025); --surface-2:rgba(255,255,255,.04);
  --card-bg:linear-gradient(180deg,rgba(20,21,26,.7),rgba(12,13,16,.7));
  --shadow-card:0 30px 80px -40px rgba(0,0,0,.7),0 6px 20px -10px rgba(0,0,0,.5);
  background:var(--bg); color:var(--ink);
}

/* Roles semánticos: se declaran en ambos ámbitos para que se recalculen dentro de .on-dark
   (una var() declarada solo en :root no se reevalúa en los descendientes). Ver DECISIONS.md D-001. */
:root,.on-dark{
  --c-link:var(--accent);              /* enlaces en texto (siempre con subrayado) */
  --c-link-underline:var(--accent-border);
  --c-eyebrow:var(--ink-soft);         /* eyebrow y etiquetas de contexto (mono, mayúsculas) */
  --c-emphasis:var(--accent);          /* <em> en titulares (serif cursiva) */
  --c-detail:var(--accent-warm);       /* iconos, viñetas, puntos */
  --btn-bg:var(--ink); --btn-ink:var(--bg);   /* botón principal: tinta sobre papel / crema sobre banda */
}