/* ==========================================================
   variables.css — DESIGN TOKENS GLOBAIS
   Paleta alinhada ao Music Studio / Áudio Lab (dark técnico).
   Altere aqui para mudar o visual inteiro do site de uma vez.
   ========================================================== */

:root {

  /* ---------- CORES PRINCIPAIS ---------- */
  --color-bg:         #0a0a0f;   /* Fundo quase preto, igual aos outros dois projetos */
  --color-surface:    #111318;   /* Painéis / cards — um tom acima do fundo */
  --color-border:     #1e1e2e;   /* Bordas sutis dos painéis */
  --color-text:       #eaeef2;   /* Texto principal */
  --color-text-muted: #a8adb5;   /* Texto secundário (subtítulo, descrições) */
  --color-label:      #7a7f87;   /* Labels das bio-tags */

  /* Acento principal — mesmo verde-limão do Music Studio */
  --color-accent:      #c8ff5a;
  --color-accent-dim:  rgba(200, 255, 90, 0.12);

  /* Acentos secundários — usados com moderação (glitch, prompt do terminal) */
  --color-neon-pink:  #ff3b8b;
  --color-neon-blue:  #00c2ff;

  /* Status verde online */
  --color-status-ok:  #00ff00;

  /* ---------- PAINÉIS / CARDS (fundo sólido, sem blur) ---------- */
  --glass-bg:         var(--color-surface);
  --glass-border:     var(--color-border);
  --glass-shadow:     rgba(0, 0, 0, 0.35);
  --glass-blur:       0px;

  --card-bg:          var(--color-surface);
  --card-border:      var(--color-border);
  --card-hover-bg:    #161922;
  --card-hover-border: var(--color-accent);
  --card-hover-shadow: rgba(0, 0, 0, 0.45);

  /* Chips de tecnologia */
  --chip-bg:          #1a1d24;
  --chip-border:      var(--color-border);
  --chip-text:        var(--color-text-muted);

  /* ---------- GRADE DE FUNDO (blueprint) ---------- */
  --grid-color:       rgba(255, 255, 255, 0.05);
  --grid-size:        32px;

  /* ---------- TERMINAL ---------- */
  --terminal-bg:      #111318;
  --terminal-text:    var(--color-accent);
  --terminal-border:  var(--color-border);
  --terminal-shadow:  rgba(0, 0, 0, 0.35);

  /* ---------- BADGE DE STATUS ---------- */
  --status-bg:        var(--color-surface);
  --status-border:    var(--color-border);
  --status-text:      var(--color-text-muted);

  /* ---------- FONTES ---------- */
  --font-display: 'Syne', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* ---------- BORDER RADIUS ---------- */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   14px;
  --radius-pill: 40px;

  /* ---------- TRANSIÇÃO PADRÃO ---------- */
  --transition:  0.3s ease;
}