/* ==========================================================================
   Tecnobox · tokens v2 — "Todo llega en una caja"
   Archivo pensado para el tema de Shopify: assets/tb-tokens.css
   (se carga en layout/theme.liquid ANTES de tb-kit.css).
   Paleta MEDIDA con código sobre el logo oficial y tiotecnobox.cl (28-sept-2026).
   Los componentes piden ROLES (--tb-acento-texto), nunca hex.
   ========================================================================== */

:root {
  /* ——— Marca: nombres propios, valores medidos ——— */
  --tb-lima: #97c93a;          /* logo: isotipo y "box" (7.636 px medidos) */
  --tb-lima-hundido: #6f9a24;  /* canto inferior de la tecla lima (profundidad) */
  --tb-lima-brillo: #b9e36a;   /* borde de luz / neón */
  --tb-musgo: #4f7a0f;         /* verde para TEXTO sobre claro (AA 5,1) */
  --tb-bosque: #3f6315;        /* texto sobre Brote */
  --tb-brote: #f0f7df;         /* lavado "Disponible online" */
  --tb-menta: #a7e9de;         /* sello de descuento */
  --tb-hoja: #284a10;          /* texto sobre menta */
  --tb-carbon: #0e0e0e;        /* cabecera, tinta, cantos */
  --tb-noche: #000000;
  --tb-grafito: #13160f;       /* escena de neón */
  --tb-papel: #f6f6f1;         /* papel térmico: tickets y etiquetas */
  --tb-reticula: #e7ecdc;      /* líneas de la retícula isométrica */
  --tb-oferta: #e5372b;
  --tb-oferta-texto: #c42a1f;  /* rojo para texto chico y fondo con texto blanco (AA 5,7) */

  /* ——— Tipografía ——— */
  --tb-f-titulo: "Space Grotesk Variable", "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --tb-f-cuerpo: "Inter Variable", "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  --tb-f-dato: "Chivo Mono", ui-monospace, "Cascadia Mono", Menlo, monospace;

  /* ——— Isometría: todo sale del isotipo (hexágono de 30°) ——— */
  --tb-iso-angulo: 30deg;
  --tb-iso-paso: 28px;         /* lado de la celda de la retícula */
  --tb-iso-proyeccion: rotateX(54.7356deg) rotateZ(45deg); /* vista isométrica real */

  /* ——— Espacio (base 4) ——— */
  --tb-e-1: 4px; --tb-e-2: 8px; --tb-e-3: 12px; --tb-e-4: 16px; --tb-e-5: 24px;
  --tb-e-6: 32px; --tb-e-7: 48px; --tb-e-8: 72px; --tb-e-9: 112px;

  /* ——— Forma: cantos vivos de caja ——— */
  --tb-r-1: 3px; --tb-r-2: 6px; --tb-r-3: 10px; --tb-r-4: 16px; --tb-r-pildora: 999px;

  /* ——— Profundidad: sombras DURAS de caja, no nubes grises ——— */
  --tb-canto: 4px;             /* grosor del canto de las cajas y teclas */
  --tb-sombra-caja: 6px 6px 0 0 var(--tb-carbon);
  --tb-sombra-caja-alta: 10px 10px 0 0 var(--tb-carbon);
  --tb-sombra-flotante: 0 18px 40px -18px rgba(14, 14, 14, .45);
  --tb-neon: 0 0 0 1px rgba(185, 227, 106, .35), 0 0 28px rgba(151, 201, 58, .45);

  /* ——— Movimiento ——— */
  --tb-d-1: 120ms; --tb-d-2: 240ms; --tb-d-3: 520ms; --tb-d-4: 900ms;
  --tb-curva: cubic-bezier(.2, .8, .2, 1);
  --tb-resorte: cubic-bezier(.34, 1.56, .64, 1);
  --tb-golpe: cubic-bezier(.7, 0, .2, 1);

  /* ——— Capas ——— */
  --tb-z-cabecera: 40; --tb-z-cajon: 70; --tb-z-ticket: 80; --tb-z-modal: 90;
}

/* ===== Roles · CLARO (la tienda) ===== */
:root,
[data-tb-tema="claro"] {
  --tb-fondo: #ffffff;
  --tb-fondo-2: #f7f8f5;
  --tb-superficie: #ffffff;
  --tb-hundida: #eef1ea;
  --tb-linea: #e3e7dd;
  --tb-linea-fuerte: #0e0e0e;
  --tb-texto: #0e0e0e;
  --tb-texto-2: #3a3f44;
  --tb-texto-3: #5b616b;
  --tb-acento: var(--tb-lima);
  --tb-acento-texto: var(--tb-musgo);
  --tb-sobre-acento: #0e0e0e;
  --tb-invertida: #0e0e0e;
  --tb-sobre-invertida: #ffffff;
  --tb-bien: #2f7d32;  --tb-bien-suave: #e6f4e7;
  --tb-atencion: #8a5a00; --tb-atencion-suave: #fff4d6;
  --tb-grave: #c42a1f; --tb-grave-suave: #fdebe9;
  --tb-info: #1f5fa8;  --tb-info-suave: #e7f0fb;
}

/* ===== Roles · OSCURO (la escena de neón) ===== */
[data-tb-tema="oscuro"] {
  --tb-fondo: #0b0d0c;
  --tb-fondo-2: #101310;
  --tb-superficie: #151915;
  --tb-hundida: #0e110e;
  --tb-linea: #252b24;
  --tb-linea-fuerte: #97c93a;
  --tb-texto: #f3f6ef;
  --tb-texto-2: #c9cfc4;
  --tb-texto-3: #9ba493;
  --tb-acento: var(--tb-lima);
  --tb-acento-texto: var(--tb-lima);
  --tb-sobre-acento: #0e0e0e;
  --tb-invertida: #f3f6ef;
  --tb-sobre-invertida: #0e0e0e;
  --tb-reticula: #1b2119;
  --tb-papel: #eeeee6;
  --tb-sombra-caja: 6px 6px 0 0 #97c93a;
  --tb-sombra-caja-alta: 10px 10px 0 0 #97c93a;
  --tb-bien: #6fcf73;  --tb-bien-suave: #13261a;
  --tb-atencion: #f0b93a; --tb-atencion-suave: #2a2210;
  --tb-grave: #ff7b6e; --tb-grave-suave: #2e1512;
  --tb-info: #7fb2f0;  --tb-info-suave: #122033;
}