/* ============================================================
   GLEICA DESIGN SYSTEM v2.0 — FinOps IA
   Tokens canônicos + aliases de backward-compat para v1.
   Carregar ANTES de qualquer outro CSS da página.
   ============================================================ */

:root {
  /* ---- Cores de marca v2 ---- */
  --cyan:        #22D3EE;
  --magenta:     #E879F9;
  --blue:        #3B82F6;
  --blue-deep:   #1E50C8;
  --violet:      #A855F7;
  --plasma:      #FF5DA2;
  --orange:      #FB923C;

  /* ---- Semânticas ---- */
  --success:     #34D399;
  --warning:     #FBBF24;
  --danger:      #F87171;
  --info:        #38BDF8;

  /* ---- Gradientes assinatura ---- */
  --grad-neural: linear-gradient(100deg, #22D3EE 0%, #A855F7 52%, #E879F9 100%);
  --grad-aurora: linear-gradient(120deg, #22D3EE 0%, #3B82F6 30%, #A855F7 62%, #FF5DA2 100%);

  /* ---- Neutros (dark theme — default) ---- */
  --bg:          #06080F;
  --bg-2:        #0B0F1A;
  --surface:     #0E1320;
  --surface-2:   #131A2A;
  --surface-3:   #1A2334;
  --hairline:    rgba(120,140,200,0.10);
  --border:      rgba(120,140,200,0.14);
  --border-strong: rgba(120,140,200,0.30);
  --border-glow: rgba(34,211,238,0.45);

  --text:        #EAF0FB;
  --text-2:      #B8C2D6;
  --text-dim:    #97A3B8;
  --text-mute:   #5A6476;
  --on-accent:   #06080F;

  /* ---- Elevação: sombra + glow ---- */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-2: 0 4px 16px -4px rgba(0,0,0,0.55);
  --shadow-3: 0 12px 40px -8px rgba(0,0,0,0.6);
  --shadow-4: 0 28px 80px -16px rgba(0,0,0,0.7);
  --glow-cyan:    0 0 0 1px rgba(34,211,238,0.35), 0 8px 40px -6px rgba(34,211,238,0.45);
  --glow-magenta: 0 0 0 1px rgba(232,121,249,0.35), 0 8px 40px -6px rgba(232,121,249,0.42);
  --glow-blue:    0 0 0 1px rgba(59,130,246,0.40), 0 8px 36px -6px rgba(59,130,246,0.5);
  --glow-soft:    0 0 60px -10px rgba(34,211,238,0.25);

  /* ---- Raios ---- */
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   18px;
  --r-xl:   26px;
  --r-pill: 999px;

  /* ---- Spacing (base 4px) ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;
  --s-20: 80px; --s-24: 96px; --s-32: 128px;

  /* ---- Motion ---- */
  --ease-out:    cubic-bezier(.16,1,.3,1);
  --ease-inout:  cubic-bezier(.65,0,.35,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --dur-1: 120ms;
  --dur-2: 220ms;
  --dur-3: 360ms;
  --dur-4: 600ms;

  /* ---- Tipografia ---- */
  --font-display: 'Chakra Petch', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* ================================================================
     ALIASES DE BACKWARD-COMPAT — mantêm estilos v1 funcionando
     Todas as referências `--color-*` e `--space-*` continuam válidas
     ================================================================ */
  --color-cyan:           var(--cyan);
  --color-magenta:        var(--magenta);
  --color-blue:           var(--blue);
  --color-bg-dark:        var(--bg);
  --color-bg-card:        var(--surface);
  --color-border:         var(--border);
  --color-text-primary:   var(--text);
  --color-text-secondary: var(--text-dim);
  --color-text-tertiary:  var(--text-mute);
  --color-success:        var(--success);
  --color-error:          var(--danger);
  --color-danger:         var(--danger);
  --color-warning:        var(--warning);

  --space-xs:  var(--s-2);
  --space-sm:  var(--s-4);
  --space-md:  var(--s-6);
  --space-lg:  var(--s-8);
  --space-xl:  var(--s-12);
  --space-2xl: var(--s-16);

  --radius-sm: var(--r-xs);
  --radius-md: var(--r-sm);

  --duration-fast:   var(--dur-1);
  --duration-normal: var(--dur-2);
  --duration-base:   var(--dur-2);
}

/* ============================================================
   TEMA CLARO — ative com <html data-theme="light">
   ============================================================ */
[data-theme="light"] {
  --bg:          #F4F1EA;
  --bg-2:        #EDE9DF;
  --surface:     #FBFAF6;
  --surface-2:   #FFFFFF;
  --surface-3:   #FFFFFF;
  --hairline:    rgba(20,30,60,0.06);
  --border:      rgba(20,30,60,0.12);
  --border-strong: rgba(20,30,60,0.22);
  --border-glow: rgba(59,130,246,0.4);
  --text:        #0E1320;
  --text-2:      #2A3548;
  --text-dim:    #55617A;
  --text-mute:   #8089A0;
  --blue:        #1E50C8;
  --on-accent:   #FBFAF6;
  --shadow-2: 0 4px 16px -4px rgba(30,40,80,0.12);
  --shadow-3: 0 12px 40px -8px rgba(30,40,80,0.16);
  --shadow-4: 0 28px 80px -16px rgba(30,40,80,0.2);
  --glow-cyan:    0 0 0 1px rgba(34,180,210,0.4), 0 10px 36px -8px rgba(34,180,210,0.35);
  --glow-magenta: 0 0 0 1px rgba(200,90,220,0.4), 0 10px 36px -8px rgba(200,90,220,0.3);
  --glow-blue:    0 0 0 1px rgba(59,130,246,0.45), 0 10px 36px -8px rgba(59,130,246,0.4);
  --glow-soft:    0 0 50px -12px rgba(59,130,246,0.2);

  /* aliases atualizados para tema claro */
  --color-bg-dark:        var(--bg);
  --color-bg-card:        var(--surface);
  --color-border:         var(--border);
  --color-text-primary:   var(--text);
  --color-text-secondary: var(--text-dim);
  --color-text-tertiary:  var(--text-mute);
}

html {
  transition: background var(--dur-3) var(--ease-out), color var(--dur-3) var(--ease-out);
}

/* ============================================================
   SCROLL REVEAL — par com ds-v2.js
   ============================================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal][data-d="1"] { transition-delay: .08s; }
[data-reveal][data-d="2"] { transition-delay: .16s; }
[data-reveal][data-d="3"] { transition-delay: .24s; }

/* ============================================================
   UTILITÁRIOS GLOBAIS
   ============================================================ */

.gl-grad-text {
  background: var(--grad-aurora);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.gl-accent-top { position: relative; overflow: hidden; }
.gl-accent-top::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--grad-aurora);
}

.btn-aurora {
  background: var(--grad-aurora);
  background-size: 200% 100%;
  color: var(--on-accent);
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-weight: 700;
  border: none;
  cursor: pointer;
  animation: ds-grad-pan 6s linear infinite alternate;
  transition: box-shadow var(--dur-2) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.btn-aurora:hover {
  box-shadow: var(--glow-magenta);
  transform: translateY(-2px);
}

.gl-theme-btn {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
  font-size: 16px;
  transition: border-color var(--dur-2);
}
.gl-theme-btn:hover { border-color: var(--cyan); }

/* ============================================================
   KEYFRAMES
   ============================================================ */
@keyframes ds-grad-pan {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

@keyframes ds-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .btn-aurora   { animation: none; }
}