/* ==========================================================================
   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 (Obsidian Couture)
   ========================================================================== */
body.theme-dark {
    /* 🚀 FIX: La variable maestra que da vida al menú inferior y fondos absolutos */
    --hub-bg-main: #000000;
    
    --hub-bg-app: #000000;
    --hub-bg-sidebar: #000000;
    --hub-bg-card: #050505;
    
    /* Bordes de grafito: definen sin agredir */
    --hub-border: #121212;
    --hub-border-hover: #ffffff; 
    
    --hub-text-main: #ffffff;
    --hub-text-muted: #555555;
    --hub-text-inverse: #000000;

    /* Materiales: Vidrio ahumado */
    --hub-bg-glass: rgba(0, 0, 0, 0.75);
    --hub-bg-app-rgb: 0, 0, 0;
    
    /* 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 Studio)
   ========================================================================== */
body.theme-light {
    /* 🚀 FIX: La variable maestra que da vida al menú inferior y fondos absolutos */
    --hub-bg-main: #ffffff;
    
    --hub-bg-app: #ffffff;
    --hub-bg-sidebar: #ffffff;
    --hub-bg-card: #fafafa; 
    
    /* Bordes de seda: el secreto de lo comercial premium */
    --hub-border: #f0f0f0;
    --hub-border-hover: #000000; 
    
    --hub-text-main: #000000;
    --hub-text-muted: #999999;
    --hub-text-inverse: #ffffff;

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

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