/* ============================================================
   TATTOO HELMET — tokens de identidad (v2, dirección oscura)
   Destino: public/assets/css/tattoo-design/tokens.css
   Cargar DESPUÉS de public/assets/css/brand/tokens.css
   (los tokens de brand/ siguen resolviendo y estos los sobreescriben
   donde toca). OJO: no escribir "--ink-" seguido de asterisco-slash acá,
   cierra el comentario CSS y descarta el :root entero.
   ============================================================ */

:root {
  /* — Marca — */
  --tmx-red:        #E1121B;   /* acción primaria + vencido */
  --tmx-red-700:    #B80E15;   /* hover */
  --tmx-red-800:    #8E0A11;
  --tmx-red-100:    rgba(225, 18, 27, 0.16);  /* tint sobre oscuro */
  --tmx-red-text:   #FF6A62;   /* rojo legible sobre negro */
  --tmx-white:      #FFFFFF;

  /* — Tinta / superficies oscuras — */
  --tmx-ink-900:    #0A0A0B;   /* fondo de app */
  --tmx-ink-850:    #0D0D10;   /* franja alterna de sección */
  --tmx-ink-800:    #101013;   /* tarjeta */
  --tmx-ink-700:    #1A1A1F;   /* flotante / fila activa */
  --tmx-ink-600:    #26262B;   /* borde fuerte */
  --tmx-ink-500:    #33333A;   /* borde de input */
  --tmx-ink-400:    #6C6C75;   /* texto tenue / label mono */
  --tmx-ink-300:    #9A9AA2;   /* texto secundario */
  --tmx-ink-100:    #D5D5DB;   /* cuerpo sobre negro */
  --tmx-border:     #1D1D21;   /* hairline */

  /* — Estados operativos — */
  --tmx-success:    #4FD16A;
  --tmx-warning:    #F5A524;
  --tmx-danger:     #E1121B;
  --tmx-info:       #3B82F6;

  /* — Colores de casco (datos de producto, NUNCA UI) — */
  --tmx-helmet-black:   #0F0F14;
  --tmx-helmet-lime:    #B6F02A;
  --tmx-helmet-cyan:    #22D3EE;
  --tmx-helmet-fuchsia: #F0269B;
  --tmx-helmet-purple:  #7B2FF2;
  --tmx-helmet-orange:  #FF7A1A;

  /* — Tipografía — */
  --tmx-font-sans: 'Archivo', 'Inter', system-ui, -apple-system, sans-serif;
  --tmx-font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --tmx-t-8:  8px;    --tmx-t-9:  9px;    --tmx-t-10: 10px;
  --tmx-t-11: 11px;   --tmx-t-12: 12px;   --tmx-t-13: 13.5px;
  --tmx-t-15: 15px;   --tmx-t-17: 17px;   --tmx-t-22: 22px;
  --tmx-t-27: 27px;   --tmx-t-38: 38px;   --tmx-t-48: 48px;  --tmx-t-56: 56px;

  --tmx-ls-tight:    -0.025em;
  --tmx-ls-mono:      0.20em;   /* etiquetas mono en mayúscula */
  --tmx-ls-wordmark:  0.50em;   /* "MX" bajo el wordmark en lockup vertical */

  /* — Espaciado (base 4) — */
  --tmx-s-1: 4px;  --tmx-s-2: 8px;  --tmx-s-3: 12px; --tmx-s-4: 16px;
  --tmx-s-5: 22px; --tmx-s-6: 32px; --tmx-s-8: 40px; --tmx-s-10: 56px;
  --tmx-gutter-mobile: 22px;

  /* — Radios — */
  --tmx-r-none: 0;
  --tmx-r-input: 6px;
  --tmx-r-card: 16px;
  --tmx-r-full: 9999px;

  /* — Elevación / foco — */
  --tmx-shadow-float: 0 12px 28px rgba(0, 0, 0, 0.60);
  --tmx-focus-ring:   0 0 0 3px rgba(225, 18, 27, 0.18);

  /* — Texturas de marca — */
  --tmx-carbon:
    repeating-linear-gradient(45deg,  rgba(255,255,255,0.06) 0 5px, transparent 5px 10px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,0.045) 0 5px, transparent 5px 10px);
  --tmx-edge-red: linear-gradient(115deg, #0A0A0B 0 46%, #E1121B 46% 50%, #16161A 50% 100%);
}

/* Wordmark tipográfico (mientras no exista el SVG oficial) */
.tmx-wordmark { font-family: var(--tmx-font-sans); font-weight: 900; font-style: italic;
  letter-spacing: -0.01em; transform: skewX(-6deg); }
.tmx-wordmark .mx { color: var(--tmx-red); }
.tmx-wordmark-sub { font-family: var(--tmx-font-mono); font-weight: 500;
  letter-spacing: var(--tmx-ls-wordmark); text-transform: uppercase; color: var(--tmx-red-text); }

/* Etiqueta mono de sección: "03 // MECANISMO" */
.tmx-eyebrow { font-family: var(--tmx-font-mono); font-size: var(--tmx-t-11); font-weight: 600;
  letter-spacing: var(--tmx-ls-mono); text-transform: uppercase; color: var(--tmx-red-text); }