/* Design tokens do viewer. Toda cor, tipografia, raio, espaço, sombra e duração
   do app mora aqui — telas e componentes só consomem var(). O acento é uma
   família derivada de --accent-base: trocar o acento do app inteiro = trocar o
   atributo data-accent no <html> (persistido em localStorage, ver index.html).
   Carrega antes de ui-kit.css/styles.css, que usam estes nomes. */

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&family=Sora:wght@600;700;800&family=JetBrains+Mono:wght@400;500;600;700&family=Bitcount+Prop+Double+Ink&display=swap");

:root {
  color-scheme: dark;

  /* Fundos — quase-preto profundo, do mais escuro (atrás do chat) ao mais claro
     (superfícies elevadas: toolbars, menus, tooltips). */
  --bg-0: #0d0e12;
  --bg-1: #12141a;
  --panel: #16181d;
  --panel-soft: #1b1e24;
  --panel-raised: #22262e;
  --border: #2b2f38;

  /* Texto */
  --text: #f2f3f5;
  --muted: #a3a8b3;

  /* Semânticos fixos — NÃO mudam com o acento. Verde fica reservado pra
     "falando / ao vivo / online" pra nunca brigar com a cor escolhida. */
  --live: #3ba55d;
  --danger: #ed4245;
  --danger-hover: #c53537;
  --warning: #f0b232;
  --mention: #f3bf33;
  --status-offline: #80848e;

  /* Tipografia: Roboto no corpo, Sora nos títulos/display. Trocável nas
     configurações de Aparência (data-font-body no <html>, ver index.html). */
  --font-body: "Roboto", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Sora", "Roboto", ui-sans-serif, system-ui, sans-serif;
  --text-xs: 0.72rem;
  --text-sm: 0.8rem;
  --text-md: 0.9rem;
  --text-lg: 1.05rem;
  --text-xl: 1.3rem;
  --text-2xl: 1.7rem;

  /* Raio — médio (8/12/16) + pill. */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Espaço — escala de 4. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* Sombra e glow — o glow é o que dá o ar "vibrante": estados ativos e quem
     está falando emitem luz da cor correspondente. */
  --shadow-1: 0 2px 8px rgba(0, 0, 0, 0.32);
  --shadow-2: 0 10px 32px rgba(0, 0, 0, 0.5);
  --glow-accent: 0 0 14px color-mix(in srgb, var(--accent-base) 45%, transparent);
  --glow-live: 0 0 10px color-mix(in srgb, var(--live) 55%, transparent);

  /* Movimento — moderado; a curva é a mesma já usada na entrada dos modais. */
  --dur-fast: 120ms;
  --dur-med: 180ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);

  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent-strong) 35%, transparent);

  /* Safe-area do dispositivo (notch/home indicator no iOS) — 0px em quem não
     tem (desktop, Android sem gesture bar). Exige viewport-fit=cover na meta
     tag (index.html) pra env() não ficar sempre 0. */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

/* ---- Variantes de acento ----
   base: preenchimento de botão primário / estados ativos.
   hover: base clareada. strong: versão clara pra texto/ícone/borda sobre fundo
   escuro. contrast: cor do texto sobre `base`. */

:root,
[data-accent="teal"] {
  --accent-base: #17a1a1;
  --accent-hover: #1fb9b9;
  --accent-strong: #4fd8d8;
  --accent-contrast: #ffffff;
}

[data-accent="blurple"] {
  --accent-base: #5865f2;
  --accent-hover: #6e78f5;
  --accent-strong: #9aa4ff;
  --accent-contrast: #ffffff;
}

[data-accent="amber"] {
  --accent-base: #f59e0b;
  --accent-hover: #fbbf24;
  --accent-strong: #fcd34d;
  --accent-contrast: #241a02;
}

[data-accent="purple"] {
  --accent-base: #8b5cf6;
  --accent-hover: #a78bfa;
  --accent-strong: #c4b5fd;
  --accent-contrast: #ffffff;
}

[data-accent="red"] {
  --accent-base: #dc3f45;
  --accent-hover: #ef5b61;
  --accent-strong: #ff9698;
  --accent-contrast: #ffffff;
}

[data-accent="green"] {
  --accent-base: #1f9d62;
  --accent-hover: #2dbb78;
  --accent-strong: #6bdb9f;
  --accent-contrast: #ffffff;
}

[data-accent="pink"] {
  --accent-base: #ec4899;
  --accent-hover: #f472b6;
  --accent-strong: #f9a8d4;
  --accent-contrast: #ffffff;
}

[data-accent="white"] {
  --accent-base: #e5e7eb;
  --accent-hover: #f8fafc;
  --accent-strong: #ffffff;
  --accent-contrast: #14161a;
}

[data-accent="orange"] {
  --accent-base: #f2711c;
  --accent-hover: #fb8b3d;
  --accent-strong: #ffb877;
  --accent-contrast: #ffffff;
}

[data-accent="magenta"] {
  --accent-base: #d626b0;
  --accent-hover: #ea3fc9;
  --accent-strong: #f38fe0;
  --accent-contrast: #ffffff;
}

[data-accent="yellow"] {
  --accent-base: #eab308;
  --accent-hover: #facc15;
  --accent-strong: #fde047;
  --accent-contrast: #241a02;
}

[data-accent="lilac"] {
  --accent-base: #a78bd6;
  --accent-hover: #bda3ea;
  --accent-strong: #d7c7f5;
  --accent-contrast: #1c1530;
}

[data-accent="navy"] {
  --accent-base: #1e3a8a;
  --accent-hover: #2b4fb5;
  --accent-strong: #7e9bea;
  --accent-contrast: #ffffff;
}

/* Fonte do corpo do app, trocável em Configurações → Aparência (data-font-body
   no <html>, persistido em localStorage — ver app.js). Sem o atributo, cai no
   --font-body padrão (Roboto) definido acima. */
[data-font-body="jetbrains"] {
  --font-body: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

/* Derivados do acento + aliases de compatibilidade com os nomes antigos que
   styles.css e ui-kit.css já consomem (--accent, --bg). A limpeza da fase 5
   remove os aliases quando nada mais usar. */
:root {
  --accent: var(--accent-base);
  --accent-soft: color-mix(in srgb, var(--accent-base) 16%, transparent);
  --bg: var(--bg-1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-med: 0ms;
  }
}