/* SYSTEM/diseno/tokens.css — única fuente de verdad (Constitución Visual TDT, 2026-09-30) */
:root {
  /* Canvas */
  --bg-base: #000000;
  --bg-surface: #07080A;
  --bg-raised: #0E0F12;

  /* Typography */
  --text-primary: #FFFFFF;
  --text-secondary: #A1A1AA;
  --text-muted: #71717A;

  /* Structure */
  --border-subtle: rgba(255, 255, 255, 0.07);   /* divisiones internas */
  --border-default: rgba(255, 255, 255, 0.12);  /* contenedores principales */
  --border-hover: rgba(255, 255, 255, 0.18);    /* estados interactivos */
  --border-active: rgba(255, 255, 255, 0.18);

  /* Geometry */
  --radius-xs: 2px;  /* chips, kbd */
  --radius-md: 8px;  /* botones, filas activas del menú */
  --radius-lg: 12px; /* tarjetas y paneles */

  /* Piezas: CORE=Core (infraestructura), EDGE=Global, FORCE=TDT System, CREW=Tropa, SCALE=Scale, VAULT=Vault, CHAIN=Chain */
  --core: #A1A1AA;
  --edge: #2F7BFF;
  --force: #EAB308;  /* TDT System (vende sistemas) */
  --crew: #F97316;   /* Tropa (comunidad) */
  --scale: #A855F7;
  --vault: #22C55E;
  --chain: #EF4444;
  --growth: #C8F031; /* Viralhaus (antes Growth; TT, 12/10). El nombre de la variable queda. No confundir con --color-growth, que es de Scale. */

  /* Compatibilidad: nombres viejos que usan las páginas, apuntan a la Constitución */
  --bg-surface-hover: var(--bg-raised);
  --border-strong: var(--border-active);
  --color-system: var(--core);
  --color-global: var(--edge);
  --color-tropa: var(--force);
  --color-growth: var(--scale);
  --color-personal: var(--vault);
  --color-crypto: var(--chain);
  --color-system-2: var(--core);
  --color-global-2: var(--edge);
  --color-tropa-2: var(--force);
  --color-growth-2: var(--scale);
  --color-personal-2: var(--vault);
  --color-crypto-2: var(--chain);
  --radius-sm: var(--radius-md);
  --radius-pill: 999px;
  --shadow-soft: none;
  --shadow-glow: none;

  /* Tipografía y escalas (sin cambios) */
  --font-sans: 'Geist', system-ui, sans-serif;
  --font-mono: 'Geist Mono', monospace;
  --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-lg: 20px; --text-xl: 24px; --text-2xl: 32px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px;

  /* Roles */
  --role-claude: #E07B4A; --role-antigravity: #2DD4BF; --role-gptwork: #E5E7EB; --role-tt: #FFFFFF;

  /* Movimiento y refinamiento */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --blur-float: blur(12px);
  --bg-float: rgba(5, 5, 5, 0.6);
  --color-pieza: var(--text-primary);
  --focus-ring: 0 0 0 2px var(--bg-base), 0 0 0 4px var(--color-pieza);
  --skeleton-pulse: skeleton-pulse 1.6s ease-in-out infinite;
  --scrollbar-size: 4px;
}

.tdt-surface {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xs);
  box-shadow: none;
}

/* System Label: chaflán del logo + nombre del módulo. Uso:
   <span class="tdt-label" style="--mod:var(--force)"><svg viewBox="0 0 108 110"><path d="M0 0H108L0 110Z"/></svg>FORCE</span> */
.tdt-label { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-sans); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); }
.tdt-label svg { width: 10.35px; height: 10.54px; fill: var(--mod, var(--core)); flex: none; }

/* Cifras: siempre mono tabular */
.tdt-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

@keyframes skeleton-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }