/* ============================================================
   VARIABLES — Design tokens da ShermanHub (tema escuro premium)
   ============================================================ */

:root {
  /* ---- Roxo da marca ---- */
  --purple:         #9d4edd;
  --purple-dark:    #7b2fbe;
  --purple-darker:  #6a0dad;
  --purple-light:   #c77dff;
  --purple-faint:   #f3e8ff;

  /* ---- Tema escuro (canvas principal) ---- */
  --bg:        #0a0a0c;   /* fundo base, quase preto frio        */
  --bg-2:      #111014;   /* painel / seção alternada            */
  --bg-3:      #16141c;   /* cartão sobre painel                 */
  --bg-elev:   #1c1925;   /* superfície elevada (hover)          */
  --ink:       #f5f3f8;   /* texto principal claro               */
  --ink-2:     #c9c4d6;   /* texto secundário                    */
  --muted:     #8b8597;   /* texto apagado / legendas            */
  --line:      rgba(157, 78, 221, 0.16);  /* hairline roxo       */
  --line-soft: rgba(255, 255, 255, 0.08); /* hairline neutro     */

  /* ---- Tema claro (usado em algumas seções/contraste) ---- */
  --bg-white:  #ffffff;
  --bg-subtle: #f7f5fb;
  --text-on-light: #16141c;

  /* ---- Glows / brilhos ---- */
  --glow-purple:    0 0 0 1px rgba(157, 78, 221, 0.25), 0 18px 60px -12px rgba(157, 78, 221, 0.45);
  --glow-soft:      0 24px 70px -20px rgba(157, 78, 221, 0.5);
  --shadow-card:    0 20px 50px -24px rgba(0, 0, 0, 0.8);

  /* ---- Tipografia ---- */
  --font-display: "Sora", "Inter", system-ui, sans-serif;   /* títulos */
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "Space Mono", "SFMono-Regular", ui-monospace, Menlo, monospace; /* labels técnicos */

  /* ---- Curvas de animação ---- */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.76, 0, 0.24, 1);   /* "curtain" / split text */
  --ease-soft:     cubic-bezier(0.4, 0, 0.2, 1);
  --transition:    all 0.3s var(--ease-soft);

  /* ---- Raios ---- */
  --radius-card: 18px;
  --radius-lg:   24px;
  --radius-btn:  10px;
  --radius-pill: 999px;

  /* ---- Layout ---- */
  --container:      1180px;
  --container-wide: 1340px;
  --pad:            clamp(1.1rem, 4vw, 2rem);

  /* ---- Z-index ---- */
  --z-progress:   1200;
  --z-nav:        1000;
  --z-overlay:    1100;
  --z-transition: 1500;
  --z-cursor:     2000;
}

/* ============================================================
   TEMA CLARO OPCIONAL — alternado manualmente (.theme-light)
   ou por preferência do sistema. Inverte o canvas mantendo a
   identidade roxa.
   ============================================================ */
.theme-light {
  --bg:        #ffffff;
  --bg-2:      #f7f5fb;
  --bg-3:      #ffffff;
  --bg-elev:   #ffffff;
  --ink:       #16141c;
  --ink-2:     #3a3548;
  --muted:     #6c6679;
  --line:      rgba(157, 78, 221, 0.22);
  --line-soft: rgba(20, 16, 28, 0.1);
  --shadow-card: 0 18px 44px -22px rgba(123, 47, 190, 0.35);
}