/* ============================================================
   TATTOO HELMET · ERP Visual Identity — Design Tokens
   Fabricante de cascos · Planta Toluca, México
   Fuente única de verdad del sistema visual. Se consume en el
   brand book (/sisvent/admin/identity) y en todas las pantallas.

   Este archivo se sirve CRUDO (no pasa por webpack). Editarlo NO
   requiere `npm run build` — solo subir $brandCssVer en
   layouts/meta_header.php para romper caché en producción.
   ============================================================ */

:root {
  /* ── Marca ───────────────────────────────────────────────
     Rojo sangre. Único color de marca; nunca se mezcla con
     otros rojos. Las acciones primarias van en tinta, así el
     rojo se reserva para identidad, selección y acento.      */
  --brand:            #E1121B;   /* Rojo de marca — logo, acento, focus (= --tmx-red) */
  --brand-700:        #B80E15;   /* Hover / active (= --tmx-red-700) */
  --brand-800:        #8E0A11;   /* Pressed · texto sobre tinte rojo (= --tmx-red-800) */
  --brand-100:        #FDE7E8;   /* Fondos tinteados, fila seleccionada */
  --brand-50:         #FEF4F4;   /* Lavado sutil */

  /* ── Tinta (superficies, títulos, CTAs primarios) ─────── */
  --ink-900:          #0F0F14;   /* Más fuerte — CTA primario, sidebar */
  --ink-800:          #15151B;   /* Títulos */
  --ink-700:          #2E2E37;   /* Cuerpo fuerte */
  --ink-600:          #4A4D55;   /* Texto secundario */
  --ink-500:          #6B6E76;   /* Terciario */
  --ink-400:          #8B8F97;   /* Cuaternario / iconos */
  --ink-300:          #B4B7BD;   /* Apagado */
  --ink-200:          #D8DADE;   /* Borde fuerte */
  --ink-150:          #E5E5E8;   /* Borde default / hairline */
  --ink-100:          #EFEEEA;   /* Borde sutil sobre fondo cálido */
  --ink-50:           #F6F4F0;   /* Fondo de página (off-white cálido) */
  --ink-25:           #FAF8F4;   /* Superficie sutil */

  /* ── Superficie ──────────────────────────────────────── */
  --surface:          #FFFFFF;
  --surface-elevated: #FFFFFF;

  /* ── Estados (distintos de la marca a propósito) ───────
     Danger es más brillante y frío que el rojo de marca:
     un error nunca debe leerse como identidad.              */
  --success:          #16A34A;
  --success-100:      #E6F6EC;
  --warning:          #F59E0B;
  --warning-100:      #FEF1D6;
  --danger:           #DC2626;
  --danger-100:       #FDE7E7;
  --info:             #2563EB;
  --info-100:         #E0E9FE;

  /* ── Tipografía ──────────────────────────────────────── */
  --font-sans:        'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:        'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Escala tipográfica (px) */
  --t-10:  10px;
  --t-11:  11px;
  --t-12:  12px;
  --t-13:  13px;
  --t-14:  14px;
  --t-16:  16px;
  --t-18:  18px;
  --t-22:  22px;
  --t-24:  24px;
  --t-28:  28px;
  --t-36:  36px;
  --t-48:  48px;
  --t-72:  72px;

  /* ── Espaciado (base 4px) ────────────────────────────── */
  --s-1:   4px;
  --s-2:   8px;
  --s-3:   12px;
  --s-4:   16px;
  --s-5:   20px;
  --s-6:   24px;
  --s-8:   32px;
  --s-10:  40px;
  --s-14:  56px;
  --s-20:  80px;

  /* ── Radios ──────────────────────────────────────────── */
  --r-sm:  4px;
  --r-md:  6px;    /* botones, inputs */
  --r-lg:  8px;    /* tarjetas, modales */
  --r-xl:  12px;
  --r-full: 9999px;

  /* ── Sombras (tinteadas en tinta, nunca negro puro) ──── */
  --shadow-xs:  0 1px 0 0 rgba(15,15,20,.04);
  --shadow-sm:  0 1px 2px 0 rgba(15,15,20,.06), 0 1px 1px 0 rgba(15,15,20,.04);
  --shadow-md:  0 4px 12px -2px rgba(15,15,20,.08), 0 2px 4px -1px rgba(15,15,20,.05);
  --shadow-lg:  0 12px 32px -8px rgba(15,15,20,.12), 0 4px 8px -2px rgba(15,15,20,.06);
  --shadow-pop: 0 24px 64px -16px rgba(15,15,20,.22);
  --shadow-brand: 0 4px 12px -2px rgba(225,18,27,.25);

  /* Focus */
  --focus-ring:  0 0 0 3px rgba(225,18,27,.30);

  /* ── Alias de compatibilidad ─────────────────────────────
     El sistema se llamaba "TATTOO HELMET Identity" antes del fork a
     TATTOO HELMET. Estos alias existen como red de seguridad para
     cualquier hoja o vista que todavía referencie los nombres
     viejos. Código nuevo: usar SIEMPRE --brand*.              */
  --stock-red:      var(--brand);
  --stock-red-700:  var(--brand-700);
  --stock-red-800:  var(--brand-800);
  --stock-red-100:  var(--brand-100);
  --stock-red-50:   var(--brand-50);
  --shadow-red:     var(--shadow-brand);
}

/* ============================================================
   Base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-size: var(--t-14);
  line-height: 1.5;
  color: var(--ink-800);
  background: var(--ink-50);
  font-feature-settings: 'cv11', 'ss03', 'ss01';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; }

/* Mono utility */
.mono { font-family: var(--font-mono); font-feature-settings: 'tnum', 'zero'; }
.tnum { font-variant-numeric: tabular-nums; }