/* ============================================================
   CYBERPUNK BLOG — DESIGN TOKENS
   Müller Fernandes | mfs.eng.br
   NOTE: fonts are loaded via wp_enqueue in functions.php,
   so the original @import line was intentionally REMOVED
   (an @import in the middle of a stylesheet is ignored by browsers).
   ============================================================ */

/* ---------- 1. CORES / COLORS ---------- */
:root {
  /* Néons — identidade visual */
  --neon-cyan:        #00f0ff;
  --neon-pink:        #ff00a0;
  --neon-purple:      #b026ff;
  --neon-green:       #39ff14;
  --neon-yellow:      #ffea00;
  --neon-orange:      #ff6b35;

  /* Dark Theme */
  --bg-dark:          #0a0a0f;
  --bg-dark-sec:      #12121a;
  --bg-dark-card:     #1a1a2e;
  --text-dark:        #e0e0e0;
  --text-dark-muted:  #8888a0;
  --border-dark:      #2a2a40;

  /* Light Theme */
  --bg-light:         #f5f5fa;
  --bg-light-sec:     #ffffff;
  --bg-light-card:    #ffffff;
  --text-light:       #1a1a2e;
  --text-light-muted: #6b6b8a;
  --border-light:     #d0d0e0;

  /* Utilitários */
  --terminal-red:     #ff5f56;
  --terminal-yellow:  #ffbd2e;
  --terminal-green:   #27c93f;
}

/* ---------- 2. TIPOGRAFIA / TYPOGRAPHY ---------- */
:root {
  --font-display: 'Chakra Petch', sans-serif;    /* Títulos, logo, CTAs */
  --font-body:     'Rajdhani', sans-serif;        /* Corpo de texto */
  --font-mono:     'Share Tech Mono', monospace;  /* Metadados, tags, código */

  --text-xs:   0.7rem;
  --text-sm:   0.8rem;
  --text-base: 0.95rem;
  --text-md:   1.1rem;
  --text-lg:   1.3rem;
  --text-xl:   1.8rem;
  --text-2xl:  clamp(2.5rem, 6vw, 5rem);
}

/* ---------- 3. ESPAÇAMENTO / SPACING ---------- */
:root {
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;
  --space-10: 4rem;
  --space-12: 6rem;
}

/* ---------- 4. SOMBRAS / SHADOWS ---------- */
:root {
  --shadow-neon-cyan:   0 0 10px var(--neon-cyan), 0 0 20px var(--neon-cyan), 0 0 40px var(--neon-cyan);
  --shadow-neon-pink:   0 0 10px var(--neon-pink), 0 0 20px var(--neon-pink);
  --shadow-neon-purple: 0 0 10px var(--neon-purple), 0 0 20px var(--neon-purple);
  --shadow-card-dark:   0 0 20px rgba(0, 240, 255, 0.15);
  --shadow-card-light:  0 4px 20px rgba(176, 38, 255, 0.1);
}

/* ---------- 5. ANIMAÇÕES / ANIMATIONS ---------- */
@keyframes glitch {
  0%, 90%, 100% { transform: translate(0); }
  92% { transform: translate(-2px, 1px); }
  94% { transform: translate(2px, -1px); }
  96% { transform: translate(-1px, 2px); }
  98% { transform: translate(1px, -2px); }
}

@keyframes blink {
  0%, 50%   { opacity: 1; }
  51%, 100% { opacity: 0; }
}

@keyframes progressMove {
  0%   { left: -60%; }
  100% { left: 100%; }
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 10px var(--neon-cyan); }
  50%      { box-shadow: 0 0 25px var(--neon-cyan); }
}

/* ---------- 6. Z-INDEX LAYERS ---------- */
:root {
  --z-bg:      0;
  --z-content: 5;
  --z-header:  10;
  --z-overlay: 9999;
}