/* ==========================================================================
   NEXTZHOP HUB TOKENS (V40.0 - TECH-COUTURE EQUILIBRIUM)
   Equilibrio entre Hacker Precision y Commercial Luxury.
   Ubicación: /assets/css/hub-tokens.css
   ========================================================================== */

:root {
    /* 1. TIPOGRAFÍA (The High-Contrast Mix) */
    --hub-font: 'Inter', sans-serif;
    --hub-font-display: 'Didot', 'Bodoni MT', 'Times New Roman', serif;
    --hub-font-mono: 'JetBrains Mono', 'Courier New', monospace;

    /* 2. IDENTIDAD & MARCA (The Green Signal) */
    --hub-accent: #1DB954;
    --hub-accent-soft: rgba(29, 185, 84, 0.08);

    /* 3. GEOMETRÍA (Sophisticated Precision) */
    /* 2px suaviza la tosquedad sin perder la esencia brutalista */
    --hub-radius-card: 2px; 
    --hub-radius-btn: 2px;

    /* 4. FÍSICA (Premium Momentum) */
    --hub-transition: 0.7s cubic-bezier(0.19, 1, 0.22, 1);
}

/* ==========================================================================
   🌙 MODO OSCURO (Matte Graphite / Editorial Charcoal)
   ========================================================================== */
body.theme-dark {
    /* 🚀 FIX: Fondo maestro acromático puro, anclado en grafito denso */
    --hub-bg-main: #111111;
    
    --hub-bg-app: #111111;
    --hub-bg-sidebar: #111111;
    --hub-bg-card: #1a1a1a; /* Elevación estructural pura sin peso visual */
    
    /* Bordes de precisión quirúrgica: trazan la retícula sin agredir */
    --hub-border: #262626;
    --hub-border-hover: #ffffff; 
    
    --hub-text-main: #ffffff;
    --hub-text-muted: #808080; /* Neutralidad absoluta, sin residuo frío */
    --hub-text-inverse: #111111;

    /* Materiales: Matriz de vidrio calibrada al canal Alpha base 17 */
    --hub-bg-glass: rgba(17, 17, 17, 0.75);
    --hub-bg-app-rgb: 17, 17, 17;
    
    /* La grilla hacker es una sombra técnica */
    --hub-grid-color: rgba(255, 255, 255, 0.03);

    /* 🚀 FIX: Inversión matemática para SVG y Logos */
    --hub-logo-invert: 1;
}

/* ==========================================================================
   🌙 MODO OSCURO (Midnight Carbon/azul / Obsidian Lighter)
   ========================================================================== */
body.theme-midnight {
    /* 🚀 FIX: Fondo maestro azul noche profundo, abandono del negro absoluto */
    --hub-bg-main: #0a0d14;
    
    --hub-bg-app: #0a0d14;
    --hub-bg-sidebar: #0a0d14;
    --hub-bg-card: #11151e; /* Elevación técnica sutil para las tarjetas */
    
    /* Bordes de grafito azulado: definen la retícula sin agredir */
    --hub-border: #1a1f2c;
    --hub-border-hover: #ffffff; 
    
    --hub-text-main: #ffffff;
    --hub-text-muted: #647087; /* Gris frío ajustado al nuevo espectro azul */
    --hub-text-inverse: #0a0d14;

    /* Materiales: Vidrio ahumado calibrado al nuevo fondo */
    --hub-bg-glass: rgba(10, 13, 20, 0.75);
    --hub-bg-app-rgb: 10, 13, 20;
    
    /* La grilla hacker es una sombra técnica */
    --hub-grid-color: rgba(255, 255, 255, 0.03);

    /* 🚀 FIX: Inversión matemática para SVG y Logos */
    --hub-logo-invert: 1;
}

/* ==========================================================================
   ☀️ MODO CLARO (Editorial Grey)
   ========================================================================== */
body.theme-light {
    /* 🚀 FIX: Fondo grisáceo costoso/cemento en lugar de blanco puro */
    --hub-bg-main: #f3f3f1;
    
    --hub-bg-app: #f3f3f1;
    --hub-bg-sidebar: #f3f3f1;
    --hub-bg-card: #ebebea; /* Tarjetas ligeramente más oscuras para contraste */
    
    /* Bordes de piedra: el secreto de lo comercial premium */
    --hub-border: #e0e0de;
    --hub-border-hover: #000000; 
    
    --hub-text-main: #000000;
    --hub-text-muted: #8b8b88; /* Gris cálido/neutro para lectura secundaria */
    --hub-text-inverse: #ffffff;

    /* Materiales: Estudio fotográfico con base pergamino */
    --hub-bg-glass: rgba(243, 243, 241, 0.85);
    --hub-bg-app-rgb: 243, 243, 241;
    
    /* La grilla comercial es una guía limpia */
    --hub-grid-color: rgba(0, 0, 0, 0.04);

    /* 🚀 FIX: Inversión matemática para SVG y Logos */
    --hub-logo-invert: 0;
}