/* ═══════════════════════════════════════════════════════════════════════════
   OneBox — sitio de producto · TOKENS PROPIOS

   POR QUÉ EXISTE. Hasta hoy este archivo no existía y los tokens los prestaba
   ../obox/assets/css_onebox/omnis-tokens.css. Eso ataba el sitio comercial a
   la aplicación: cambiar un color en la app movía el sitio, y el sitio no
   podía cambiar nada por su cuenta. La decisión es que /ob/ sea INDEPENDIENTE
   de /obox/ (las características se conectarán después, y será otra cosa).

   QUÉ ES ESTO. Los 43 tokens que el sitio realmente usa —medidos, no
   supuestos: var(--x) que aparece en los 10 .php, inc/*.php y ob.css— con sus
   valores EXACTOS. No es una copia de omnis-tokens.css (524 líneas, 101+120
   variables): es el subconjunto que /ob/ consume, y nada más.

   Los valores están tomados de la base del catálogo (paleta CLARA) y sus 10
   sobreescrituras de tema oscuro, para que el render sea idéntico al de antes
   de separar. La equivalencia se comprobó comparando capturas de las 10
   páginas en los dos temas.

   ORDEN. Este archivo va sin @layer, igual que ob.css y a diferencia de
   omnis-tokens.css (que sí usa @layer). Lo no-encapado gana sobre lo
   encapado, así que estos valores ganan sobre el catálogo mientras siga
   cargado, y ob.css —que va después— sigue ganando sus correcciones medidas
   de contraste en tema claro. El día que se retire el catálogo de head.php,
   esto queda como la única fuente y nada cambia.

   OJO — DOS ARREGLOS INCLUIDOS. Había dos tokens USADOS SIN DEFINIR en
   ninguna hoja servida (--space-gutter y --line), sin fallback: la declaración
   entera quedaba inválida y la propiedad caía a su valor inicial.
     · --space-gutter → .ob-alta (empezar-gratis.php) se quedaba con padding:0
     · --line         → dos bordes de 1px no se pintaban
   Se declaran aquí con el valor que les corresponde. Esos dos cambios SÍ se
   ven en pantalla: el resto de la separación es idéntica.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Superficies y tinta */
  --bg:                 #f3f4f6;
  --surface:            #ffffff;
  --surface-2:          #f9fafb;
  --ink:                #1c1917;
  --gray-900:           #171717;
  --text:               #111827;
  --text-soft:          #4b5563;
  --text-mute:          #6b7280;
  --text-muted:         #a3a3a3;

  /* Marca */
  --brand:              #e8400f;
  --brand-hover:        #ff512b;
  --brand-press:        #b81f00;
  --brand-contrast:     #ffffff;
  --brand-wash:         #fff1ec;

  /* Estados */
  --ok:                 #11853c;
  --ok-solid:           #0e6a30;
  --danger:             #e11d48;
  --danger-solid:       #b41739;
  --info-solid:         #1a53cb;
  --warn-solid:         #854f11;

  /* Bordes */
  --border:             #e5e7eb;
  --border-strong:      #d1d5db;
  --line:               var(--border);        /* ← antes sin definir: 2 bordes no se pintaban */

  /* Espacio — una sola escala fluida */
  --space-2xs:          .25rem;
  --space-xs:           clamp(0.25rem, 0.125rem + 0.5vw, 0.5rem);
  --space-sm:           clamp(0.375rem, 0.25rem + 0.5vw, 0.75rem);
  --space-md:           clamp(0.625rem, 0.5rem + 0.5vw, 1rem);
  --space-lg:           clamp(0.75rem, 0.5rem + 1vw, 1.25rem);
  --space-xl:           clamp(1rem, 0.75rem + 1vw, 1.75rem);
  --space-2xl:          clamp(1.25rem, 0.75rem + 2vw, 2.5rem);
  --space-gutter:       var(--space-lg);      /* ← antes sin definir: .ob-alta quedaba con padding:0 */

  /* Tipografía */
  --text-xs:            0.75rem;
  --font-mono:          ui-monospace, monospace;
  --fluid-xs:           clamp(0.625rem, 0.5rem + 0.5vw, 0.75rem);
  --fluid-sm:           clamp(0.75rem, 0.625rem + 0.5vw, 0.875rem);
  --fluid-md:           clamp(0.875rem, 0.75rem + 0.5vw, 1rem);
  --fluid-lg:           clamp(1rem, 0.875rem + 0.5vw, 1.125rem);

  /* Forma y movimiento */
  --radius-sm:          6px;
  --radius:             10px;
  --radius-lg:          16px;
  --t-fast:             120ms;

  /* Cromo del sitio */
  --nav-h:              4rem;
  --bg-alt:             rgba(127, 127, 127, .11);   /* hover neutro, válido en ambos temas */
}

/* Tema oscuro — mismos 10 tokens que cambiaba el catálogo. La lista de
   selectores cubre las dos vías que /ob/ usa de verdad (nav.php conmuta
   data-theme y añade .dark-mode a <html>). */
:root[data-theme="dark"],
html.dark-mode {
  --bg:              #0d131f;
  --surface:         #111827;
  --surface-2:       #1f2937;
  --text:            #f9fafb;
  --text-soft:       #d1d5db;
  --text-mute:       #9ca3af;
  --border:          #374151;
  --border-strong:   #4b5563;
  --ok:              #149945;
  --danger:          #e84b6d;
}