/* ============================================================================
   TOKENS — variables del sistema
   ----------------------------------------------------------------------------
   Los valores de color y tipografía de acá son los DEFAULTS del template.
   En runtime, js/app.js lee BRAND.colores y BRAND.tipografia del config.js y
   pisa estas variables con setProperty(). Es decir: para cambiar de cliente
   NO se toca este archivo, se toca config.js.

   Los tokens que NO son de marca (espaciado, escala tipográfica, bordes,
   motion) son estructurales: definen el "sistema MDR Labs" y se mantienen
   igual entre clientes.
============================================================================ */

/* Las familias se cargan desde assets/css/fonts.css (self-hosteadas, sin
   dependencia externa). Ese archivo va enlazado ANTES que este. */

:root {
  /* --- Color (pisado por BRAND.colores) ---------------------------------- */
  --c-bg:           #0A0A0A;
  --c-bg-alt:       #141414;
  --c-text:         #F2F2F2;
  --c-text-dim:     #7A7A7A;
  --c-border:       #2A2A2A;
  --c-accent:       #DBFF00;
  --c-accent-text:  #0A0A0A;
  --c-sold:         #4A4A4A;

  /* Derivados — no se configuran, se calculan sobre los de arriba */
  --c-border-strong: color-mix(in srgb, var(--c-border) 60%, var(--c-text) 40%);
  --c-overlay:       rgba(10, 10, 10, 0.88);
  --c-accent-soft:   color-mix(in srgb, var(--c-accent) 12%, transparent);
  --c-danger:        #FF4A3D;
  --c-ok:            #4ADE80;

  /* --- Tipografía (familias pisadas por BRAND.tipografia) ---------------- */
  --f-title: 'Archivo Narrow', 'Oswald', 'Arial Narrow', sans-serif;
  --f-body:  'Inter', system-ui, -apple-system, sans-serif;
  --f-mono:  'JetBrains Mono', ui-monospace, 'Courier New', monospace;

  /* Escala fluida. Mobile-first: el mínimo es el que importa. */
  --t-xs:   0.6875rem;                          /* 11px  · códigos, labels   */
  --t-sm:   0.8125rem;                          /* 13px  · meta, ayudas      */
  --t-base: 0.9375rem;                          /* 15px  · cuerpo            */
  --t-md:   clamp(1rem,    0.95rem + 0.4vw, 1.125rem);
  --t-lg:   clamp(1.25rem, 1.1rem  + 1vw,   1.75rem);
  --t-xl:   clamp(1.75rem, 1.4rem  + 2.2vw, 3rem);
  --t-2xl:  clamp(2.5rem,  1.8rem  + 4.5vw, 5.5rem);
  --t-3xl:  clamp(3.5rem,  2rem    + 9vw,   9rem);

  --lh-tight: 0.92;
  --lh-snug:  1.15;
  --lh-body:  1.55;

  --tracking-title: -0.02em;   /* condensada apretada */
  --tracking-label:  0.14em;   /* mayúsculas espaciadas */
  --tracking-wide:   0.06em;

  /* --- Espaciado --------------------------------------------------------- */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.5rem;
  --sp-6:  2rem;
  --sp-7:  3rem;
  --sp-8:  4rem;
  --sp-9:  6rem;

  /* --- Bordes: duros, sin radio ------------------------------------------ */
  --bw:      1px;
  --bw-thick: 2px;
  --radius:  0;
  --border:  var(--bw) solid var(--c-border);

  /* --- Layout ------------------------------------------------------------ */
  --maxw:        1600px;
  --gutter:      var(--sp-4);
  --header-h:    56px;
  --ticker-h:    28px;
  --buybar-h:    68px;   /* barra fija de compra en mobile */

  /* --- Motion ------------------------------------------------------------ */
  --dur:      160ms;
  --dur-slow: 320ms;
  --ease:     cubic-bezier(0.22, 0.61, 0.36, 1);

  /* --- Capas ------------------------------------------------------------- */
  --z-base:    1;
  --z-sticky:  50;
  --z-header:  100;
  --z-buybar:  150;
  --z-sheet:   200;
  --z-toast:   300;
}

@media (min-width: 768px) {
  :root {
    --gutter:   var(--sp-6);
    --header-h: 68px;
  }
}

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