/**
 * design-tokens.css — Sistema de diseño CubanHacks
 *
 * Fuente única de verdad para variables CSS del sitio público.
 * Extiende/completa las variables de nexus-public.css.
 * Cargar ANTES de nexus-public.css o cualquier hoja de estilos de feature.
 *
 * Uso desde PHP:
 *   <link rel="stylesheet" href="/assets/css/design-tokens.css?v=1">
 *
 * NO tocar valores sin verificar visualmente en home, products y user/dashboard.
 */

:root {
    /* ── Paleta principal ─────────────────────────────── */
    --ch-bg-deep:           #0a0014;
    --ch-bg-mid:            #14001e;
    --ch-bg-surface:        rgba(15, 12, 22, 0.92);

    --ch-accent-cyan:       #00ffff;
    --ch-accent-orange:     #f97316;
    --ch-accent-pink:       #ec4899;
    --ch-accent-violet:     #8b5cf6;
    --ch-accent-green:      #00ff88;
    --ch-accent-gold:       #fcd34d;

    /* ── Texto ───────────────────────────────────────── */
    --ch-text-primary:      #f1f5f9;
    --ch-text-muted:        #94a3b8;
    --ch-text-dim:          #64748b;

    /* ── Bordes y sombras ────────────────────────────── */
    --ch-border-subtle:     rgba(249, 115, 22, 0.22);
    --ch-border-cyan:       rgba(0, 255, 255, 0.3);
    --ch-shadow-glow-cyan:  0 0 20px rgba(0, 255, 255, 0.3);
    --ch-shadow-glow-orange:0 0 20px rgba(249, 115, 22, 0.35);
    --ch-shadow-card:       0 8px 32px rgba(0, 0, 0, 0.4);

    /* ── Gradientes ──────────────────────────────────── */
    --ch-gradient-hero:     linear-gradient(135deg, #0a0014 0%, #14001e 100%);
    --ch-gradient-sunset:   linear-gradient(135deg, #f97316 0%, #ec4899 50%, #8b5cf6 100%);
    --ch-gradient-card:     linear-gradient(145deg, #12002a 0%, #1a0036 60%, #0e001f 100%);

    /* ── Tipografía ──────────────────────────────────── */
    --ch-font-ui:           'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --ch-font-display:      'Orbitron', monospace;
    --ch-font-body:         'Space Grotesk', sans-serif;

    /* ── Tamaños de texto ────────────────────────────── */
    --ch-text-xs:   0.75rem;
    --ch-text-sm:   0.875rem;
    --ch-text-base: 1rem;
    --ch-text-lg:   1.125rem;
    --ch-text-xl:   1.25rem;
    --ch-text-2xl:  1.5rem;
    --ch-text-3xl:  1.875rem;

    /* ── Espaciados ──────────────────────────────────── */
    --ch-space-1:  0.25rem;
    --ch-space-2:  0.5rem;
    --ch-space-3:  0.75rem;
    --ch-space-4:  1rem;
    --ch-space-5:  1.25rem;
    --ch-space-6:  1.5rem;
    --ch-space-8:  2rem;
    --ch-space-10: 2.5rem;
    --ch-space-12: 3rem;
    --ch-space-16: 4rem;

    /* ── Radios ──────────────────────────────────────── */
    --ch-radius-sm:   8px;
    --ch-radius-md:   14px;
    --ch-radius-lg:   20px;
    --ch-radius-xl:   25px;
    --ch-radius-full: 9999px;

    /* ── Transiciones ────────────────────────────────── */
    --ch-transition-fast:   0.15s ease;
    --ch-transition-normal: 0.3s ease;
    --ch-transition-slow:   0.5s ease;

    /* ── Z-index ─────────────────────────────────────── */
    --ch-z-dropdown:    1000;
    --ch-z-sidebar:     9000;
    --ch-z-header:      9500;
    --ch-z-modal:       99999;
    --ch-z-preloader:   9999999;

    /* ── Aliases compatibles con nexus-public.css ─────── */
    /* Mantener sincronizados con los --nx-* para transición gradual */
    --nx-bg-deep:           var(--ch-bg-deep);
    --nx-orange:            var(--ch-accent-orange);
    --nx-pink:              var(--ch-accent-pink);
    --nx-violet:            var(--ch-accent-violet);
    --nx-text:              var(--ch-text-primary);
    --nx-muted:             var(--ch-text-muted);
    --nx-surface:           var(--ch-bg-surface);
    --nx-border:            var(--ch-border-subtle);
    --nx-gradient-sunset:   var(--ch-gradient-sunset);
    --nx-radius:            var(--ch-radius-md);
    --nx-radius-sm:         var(--ch-radius-sm);
    --nx-font:              var(--ch-font-ui);
}

/* ── Utilidades base compartidas ────────────────────────────── */

/* Contenedor principal del sitio (mismo que .nx-shell) */
.ch-container {
    box-sizing: border-box;
    width: 100%;
    max-width: 1400px;
    margin-inline: auto;
    padding: var(--ch-space-4) var(--ch-space-5) var(--ch-space-10);
}

/* Tarjeta estándar del sitio */
.ch-card {
    background: var(--ch-bg-surface);
    border: 1px solid var(--ch-border-subtle);
    border-radius: var(--ch-radius-md);
    box-shadow: var(--ch-shadow-card);
    padding: var(--ch-space-6);
}

/* Botón primario */
.ch-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: var(--ch-space-2);
    padding: var(--ch-space-3) var(--ch-space-6);
    background: var(--ch-gradient-sunset);
    color: #fff;
    border: none;
    border-radius: var(--ch-radius-full);
    font-family: var(--ch-font-ui);
    font-weight: 600;
    font-size: var(--ch-text-sm);
    cursor: pointer;
    transition: opacity var(--ch-transition-fast), transform var(--ch-transition-fast);
    text-decoration: none;
}
.ch-btn-primary:hover {
    opacity: 0.88;
    transform: translateY(-1px);
}
.ch-btn-primary:active {
    transform: translateY(0);
}

/* Botón secundario */
.ch-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: var(--ch-space-2);
    padding: var(--ch-space-3) var(--ch-space-6);
    background: transparent;
    color: var(--ch-accent-cyan);
    border: 1px solid var(--ch-border-cyan);
    border-radius: var(--ch-radius-full);
    font-family: var(--ch-font-ui);
    font-weight: 600;
    font-size: var(--ch-text-sm);
    cursor: pointer;
    transition: background var(--ch-transition-fast), box-shadow var(--ch-transition-fast);
    text-decoration: none;
}
.ch-btn-secondary:hover {
    background: rgba(0, 255, 255, 0.08);
    box-shadow: var(--ch-shadow-glow-cyan);
}

/* Badge de estado */
.ch-badge {
    display: inline-block;
    padding: 2px var(--ch-space-2);
    border-radius: var(--ch-radius-sm);
    font-size: var(--ch-text-xs);
    font-weight: 600;
    letter-spacing: 0.03em;
}
.ch-badge--success { background: rgba(0,255,136,.15); color: var(--ch-accent-green); }
.ch-badge--warn    { background: rgba(249,115,22,.15); color: var(--ch-accent-orange); }
.ch-badge--info    { background: rgba(0,255,255,.12); color: var(--ch-accent-cyan); }
.ch-badge--error   { background: rgba(239,68,68,.15); color: #f87171; }