/* ============================================================
   PIXEL360 · DESIGN TOKENS
   Paleta y escala derivadas del Manual de Marca oficial.
   Dark-only (la marca es dark-first; sin modo claro por decisión de diseño).
   ============================================================ */

:root {
    /* ---- Marca (valores fijos del manual) ---- */
    --px-cian: #00E5FF;          /* Principal · acción · LED */
    --px-cian-600: #00B8CC;      /* Cian hover/oscuro */
    --px-purple: #7000FF;        /* Secundario · tecnología */
    --px-purple-300: #9B4DFF;    /* Púrpura claro */
    --px-night: #0C1220;         /* Fondo principal */
    --px-neon: #00FFB2;          /* Accent · CTAs (uso ~5%) */
    --px-white: #FFFFFF;

    /* ---- Escala de superficies (familia Noche) ---- */
    --px-bg:        #0C1220;     /* Fondo base */
    --px-bg-deep:   #060A14;     /* Más profundo (hero, secciones) */
    --px-surface:   #121929;     /* Tarjeta / panel */
    --px-surface-2: #1A2336;     /* Tarjeta elevada / hover */
    --px-border:    #203040;     /* Bordes */
    --px-border-soft: rgba(255, 255, 255, 0.08);

    /* ---- Texto ---- */
    --px-text:        #FFFFFF;
    --px-text-muted:  #C4CDD8;
    --px-text-dim:    #8090A8;
    --px-text-on-cian: #04121A;  /* Texto sobre fondos cian */

    /* ---- Acentos semánticos ---- */
    --px-accent:        var(--px-cian);
    --px-accent-2:      var(--px-purple);
    --px-cta:           var(--px-neon);
    --px-danger:        #FF3C3C;

    /* ---- Glow / sombras LED ---- */
    --px-glow-cian:   0 0 24px rgba(0, 229, 255, 0.35);
    --px-glow-purple: 0 0 24px rgba(112, 0, 255, 0.30);
    --px-glow-neon:   0 0 24px rgba(0, 255, 178, 0.35);
    --px-shadow:      0 12px 40px rgba(0, 0, 0, 0.55);
    --px-shadow-sm:   0 4px 16px rgba(0, 0, 0, 0.40);

    /* ---- Gradientes de marca ---- */
    --px-grad-brand: linear-gradient(120deg, var(--px-cian) 0%, var(--px-purple) 100%);
    --px-grad-night: radial-gradient(120% 120% at 50% 0%, #131c30 0%, var(--px-night) 55%, var(--px-bg-deep) 100%);

    /* ---- Tipografía ---- */
    --px-font-display: 'Rajdhani', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --px-font-body:    'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --px-font-mono:    'Consolas', ui-monospace, 'SF Mono', Menlo, monospace;

    /* Escala fluida (clamp) */
    --px-text-kicker:  clamp(0.72rem, 0.66rem + 0.2vw, 0.82rem);
    --px-text-sm:      clamp(0.85rem, 0.82rem + 0.15vw, 0.95rem);
    --px-text-body:    clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    --px-text-lede:    clamp(1.1rem, 1rem + 0.45vw, 1.4rem);
    --px-text-h3:      clamp(1.3rem, 1.1rem + 0.7vw, 1.75rem);
    --px-text-h2:      clamp(1.9rem, 1.4rem + 1.9vw, 3.2rem);
    --px-text-h1:      clamp(2.6rem, 1.7rem + 4.2vw, 5.5rem);
    --px-text-display: clamp(3.4rem, 2rem + 7vw, 8rem);

    --px-leading-tight: 1.05;
    --px-leading-snug:  1.25;
    --px-leading-body:  1.6;

    /* ---- Espaciado ---- */
    --px-space-2xs: 0.25rem;
    --px-space-xs:  0.5rem;
    --px-space-sm:  0.75rem;
    --px-space-md:  1.25rem;
    --px-space-lg:  2rem;
    --px-space-xl:  3rem;
    --px-space-2xl: clamp(3rem, 2rem + 4vw, 6rem);
    --px-space-section: clamp(4.5rem, 3rem + 6vw, 9rem);

    /* ---- Radios ---- */
    --px-radius-sm: 8px;
    --px-radius:    14px;
    --px-radius-lg: 22px;
    --px-radius-pill: 999px;

    /* ---- Layout ---- */
    --px-container: 1200px;
    --px-container-wide: 1440px;
    --px-navbar-h: 72px;

    /* ---- Motion ---- */
    --px-dur-fast:   150ms;
    --px-dur-normal: 300ms;
    --px-dur-slow:   600ms;
    --px-ease:       cubic-bezier(0.16, 1, 0.3, 1);
    --px-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* Respeta usuarios que prefieren menos movimiento */
@media (prefers-reduced-motion: reduce) {
    :root {
        --px-dur-fast: 0ms;
        --px-dur-normal: 0ms;
        --px-dur-slow: 0ms;
    }
}