/* FechAqui — Design System tokens (app chrome)
   Governa o APP, não os 4 temas de conteúdo da proposta.
   Dark é o padrão; alterna via [data-theme] na raiz. */

*, *::before, *::after { box-sizing: border-box; }

[data-theme]{
  --font-display:'Space Grotesk', system-ui, sans-serif;
  --font-text:'Hanken Grotesk', system-ui, sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, monospace;

  /* marca violeta — identidade + AO VIVO */
  --brand-300:#d4b3ff; --brand-400:#c08cff; --brand-500:#a855f7; --brand-600:#9333ea; --brand-700:#7c2fd1;

  /* escala de engajamento (frio → quente) — só para dado de atenção */
  --heat-0:#262b36; --heat-1:#0f6e63; --heat-2:#16c79a; --heat-3:#8fd14f; --heat-4:#f5b53d; --heat-5:#ff5c2a;
  --heat-grad:linear-gradient(90deg,#262b36 0%,#0f6e63 22%,#16c79a 44%,#8fd14f 62%,#f5b53d 80%,#ff5c2a 100%);

  /* semântica */
  --success:#2bd47f; --danger:#ff4d4f; --warning:#f5a623; --info:#4d8dff;

  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px;
  --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px;
  --r-xs:4px; --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:20px; --r-pill:999px;

  --ease-out:cubic-bezier(.22,1,.36,1);
  --dur-fast:120ms; --dur-base:180ms;
}

[data-theme="dark"]{
  --bg-sunken:#08090d; --bg-base:#0c0e13; --bg-surface:#13161e; --bg-surface-2:#1a1e28; --bg-surface-3:#232834;
  --border:rgba(255,255,255,.08); --border-strong:rgba(255,255,255,.15);
  --text-primary:#f3f5fb; --text-secondary:#a3acc0; --text-muted:#6c7488; --text-faint:#474e5f;
  --brand-text:#c08cff; --on-brand:#0c0e13;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow-md:0 6px 20px rgba(0,0,0,.45); --shadow-lg:0 20px 50px rgba(0,0,0,.55);
  --glow-live:0 0 0 4px rgba(168,85,247,.18);
  --grid-line:rgba(255,255,255,.06); --track:#1a1e28;
  color-scheme: dark;
}
[data-theme="light"]{
  --bg-sunken:#eceef3; --bg-base:#f5f6f9; --bg-surface:#ffffff; --bg-surface-2:#f6f7fa; --bg-surface-3:#eef0f5;
  --border:rgba(13,18,33,.10); --border-strong:rgba(13,18,33,.18);
  --text-primary:#0f131c; --text-secondary:#454d5f; --text-muted:#6c7488; --text-faint:#9aa1b2;
  --brand-text:#7c2fd1; --on-brand:#ffffff;
  --shadow-sm:0 1px 2px rgba(13,18,33,.06); --shadow-md:0 8px 24px rgba(13,18,33,.10); --shadow-lg:0 24px 60px rgba(13,18,33,.14);
  --glow-live:0 0 0 4px rgba(168,85,247,.16);
  --grid-line:rgba(13,18,33,.07); --track:#eef0f5;
  color-scheme: light;
}

/* ---- keyframes do sistema ---- */
@keyframes fa-pulse-ring{0%{transform:scale(.7);opacity:.8}70%{transform:scale(2.4);opacity:0}100%{opacity:0}}
@keyframes fa-pulse-dot{0%,100%{transform:scale(1)}50%{transform:scale(.82)}}
@keyframes fa-shimmer{0%{background-position:-280px 0}100%{background-position:280px 0}}
@keyframes fa-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes fa-spin{to{transform:rotate(360deg)}}

/* dot/anel "ao vivo" reutilizável */
.fa-live{position:relative;display:inline-flex;width:8px;height:8px;flex:0 0 auto}
.fa-live::before{content:"";position:absolute;inset:0;border-radius:var(--r-pill);
  background:currentColor;animation:fa-pulse-ring 1.8s var(--ease-out) infinite}
.fa-live::after{content:"";position:relative;width:8px;height:8px;border-radius:var(--r-pill);
  background:currentColor}