/*
 * Goklah — design tokens.
 *
 * Identidade própria: accent azul-violeta sobre fundo escuro azulado.
 * As MEDIDAS (escala de arredondamento, escala tipográfica, larguras de
 * layout, alturas de controle) seguem as do Stoat, extraídas do código
 * dele e documentadas no plano da fase — proporção e densidade eram o
 * que faltava. As CORES e a marca são do Goklah, não dele.
 *
 * Regra de ouro: nenhum valor de cor/espaçamento/raio novo deve ser
 * escrito solto em outro arquivo CSS — sempre referenciar uma variável
 * daqui. Se faltar um token, criar aqui, não improvisar.
 */

:root {
  /* ---- Superfícies ---- */
  --bg-app: #0a0b12;
  --bg-sidebar: #0d0e17;
  --bg-surface: #171b28;
  --bg-surface-raised: #1c2032;
  --bg-sunken: #0e0f18;
  --bg-hover: rgba(255, 255, 255, 0.05);
  --bg-active: rgba(255, 255, 255, 0.08);
  --overlay-scrim: rgba(5, 6, 10, 0.6);

  /* ---- Texto ---- */
  --text-primary: #f2f3f7;
  --text-secondary: #b8bdd0;
  /* #828ba0 dá 5.03:1 sobre --bg-surface (o #788198 da paleta
     provisória dava 4.41:1, abaixo do mínimo AA de 4.5:1). */
  --text-muted: #828ba0;
  --text-disabled: #565c72;
  --text-on-accent: #14161d;

  /* ---- Accent (identidade Goklah) ----
     --accent é a cor da identidade: seleção, ícones ativos, indicadores,
     foco, detalhes. Nunca como fundo de botão com texto em cima.
     --accent-action é a variante escura pra botão com texto branco
     (6.08:1). */
  --accent: #6678f4;
  --accent-hover: #7888f5;
  --accent-active: #5666cf;
  --accent-muted: rgba(102, 120, 244, 0.16);
  --accent-muted-strong: rgba(102, 120, 244, 0.24);
  --accent-action: #4c5ab7;
  --accent-action-hover: #616dbf;
  --accent-action-active: #404c9b;

  /* ---- Semânticas ---- */
  --success: #3ecf8e;
  --success-muted: rgba(62, 207, 142, 0.16);
  --warning: #f5a623;
  --warning-muted: rgba(245, 166, 35, 0.16);
  --danger: #e5484d;
  --danger-hover: #f16368;
  --danger-muted: rgba(229, 72, 77, 0.16);

  /* ---- Presença social ---- */
  --presence-online: #3ecf8e;
  --presence-idle: #f5a623;
  --presence-focus: #6678f4;
  --presence-busy: #e5484d;
  --presence-invisible: #828ba0;
  --presence-offline: #697386;

  /* ---- Bordas ---- */
  --border: #262a3a;
  --border-strong: #333a4f;
  --border-focus: var(--accent);

  /* ---- Espaçamento ----
     Escala do Stoat (themeConstants.gap): 2/4/6/8/12/15/28/32/64. */
  --space-xxs: 1px;
  --space-xs: 2px;
  --space-sm: 4px;
  --space-s: 6px;
  --space-md: 8px;
  --space-l: 12px;
  --space-lg: 15px;
  --space-x: 28px;
  --space-xl: 32px;
  --space-xxl: 64px;
  /* Aliases numéricos preservados — muita regra existente usa estes. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;

  /* ---- Raio ----
     Superfícies mais técnicas e planas: arredondamento deixa de ser
     decoração padrão e fica reservado a controles e camadas flutuantes. */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-li: 10px;
  --radius-xl: 12px;
  --radius-full: 999px;

  /* ---- Tipografia ----
     Inter (ver styles/typography.css, licença OFL-1.1) — voltou a ser
     Inter na Fase C depois de checagem direta na própria tela de
     Aparência do Stoat real (não código nem print da logo): é isso que
     aparece configurado lá como fonte de interface.
     Escala do Stoat (components/ui/components/design/Text.tsx):
     title lg/md/sm, body lg/md/sm, label lg/md/sm. O peso 550 do Stoat
     vira 600 aqui (uso os estáticos, não a variável). */
  --font-sans: "Inter", -apple-system, "Segoe UI", sans-serif;
  /* Fase C (Aparência) — reservada: o Goklah ainda não tem nenhum
     conteúdo que use fonte monoespaçada (nenhum bloco de código, nem o
     código de convite de sala é exibido assim hoje). Não self-hosted
     como o Inter acima — "Fira Code" só aparece de fato se já
     estiver instalada no sistema de quem usa; senão cai na monoespaçada
     padrão do SO. Ver comentário da página Aparência em
     views/settings.ts sobre por quê. */
  --font-mono: "Fira Code", ui-monospace, "Cascadia Code", "Consolas", monospace;

  --title-lg-size: 1.375rem;
  --title-lg-line: 1.75rem;
  --title-md-size: 1rem;
  --title-md-line: 1.5rem;
  --title-sm-size: 0.875rem;
  --title-sm-line: 1.25rem;

  --body-lg-size: 1rem;
  --body-lg-line: 1.5rem;
  --body-md-size: 0.875rem;
  --body-md-line: 1.25rem;
  --body-sm-size: 0.75rem;
  --body-sm-line: 1rem;

  --label-lg-size: 0.875rem;
  --label-lg-line: 1.25rem;
  --label-md-size: 0.75rem;
  --label-md-line: 1rem;
  --label-sm-size: 0.6875rem;
  --label-sm-line: 0.875rem;

  --tracking-title: 0.009375rem;
  --tracking-body: 0.015625rem;
  --tracking-label: 0.03125rem;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Aliases de tamanho preservados (regras antigas dependem deles). */
  --text-xs: 11px;
  --text-sm: 12px;
  --text-base: 13px;
  --text-md: 14px;
  --text-lg: 16px;
  --text-xl: 20px;
  --text-2xl: 28px;

  /* ---- Alturas de controle ---- */
  --control-h-sm: 28px;
  --control-h-md: 36px;
  --control-h-lg: 44px;
  /* Item de menu da barra contextual — 42px, medida do MenuButton
     size="normal" do Stoat. */
  --menu-item-h: 42px;

  /* ---- Movimento ---- */
  --transition-fast: 120ms ease;
  --transition-base: 180ms ease;

  /* ---- Camadas ---- */
  --shadow-raised: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-modal: 0 16px 48px rgba(0, 0, 0, 0.5);
  --shadow-popover: 0 12px 32px rgba(0, 0, 0, 0.45);

  /* ---- Layout do app shell ----
     Medidas do Stoat: rail com item de 56x56 (avatar 42px dentro), e
     barra de canais de 248px. */
  --rail-w: 56px;
  --rail-item: 56px;
  --rail-avatar: 42px;
  --context-sidebar-w: clamp(208px, 24vw, 248px);
  --header-h: 48px;
  /* Barra lateral da central de configurações (Fase B) — um pouco mais
     larga que a contextual (248px) porque os rótulos das 8 categorias
     são mais longos em média ("Notificações", "Sessões e vídeo" etc.). */
  /* A navegação e a página de 720px formam um único bloco central. O recuo
     cresce junto com telas ultrawide, em vez de parar em 440px e deixar todo
     o conjunto preso na metade esquerda da janela. */
  /* Em telas largas: sidebar + 24px de padding + metade da página de
     Configurações (720 / 2) termina exatamente no centro da janela. */
  --settings-sidebar-w: clamp(248px, calc(50vw - 384px), 1400px);
  /* Altura reservada pros botões nativos sobrepostos do Windows
     (titleBarOverlay) — ver main.ts. */
  --titlebar-h: 32px;
}

/*
 * Tema claro (Fase C — Aparência). Escopo deliberadamente pequeno, como
 * pedido: só troca a paleta de superfícies/texto/borda. Accent, cores
 * semânticas (success/warning/danger), presença e sombras continuam as
 * mesmas nos dois temas — é a mesma decisão de identidade visual do
 * Goklah em qualquer fundo, não uma paleta secundária inteira.
 *
 * Aplicado via `data-theme="light"` no <html> — settings.ts (Aparência)
 * escreve esse atributo e persiste a escolha (goklah:theme no
 * localStorage); dist/renderer/theme-init.js aplica o valor salvo antes
 * do primeiro paint pra não haver flash do tema escuro (default) pra
 * quem prefere claro.
 */
:root[data-theme="light"] {
  --bg-app: #f4f5fa;
  --bg-sidebar: #eceef5;
  --bg-surface: #ffffff;
  --bg-surface-raised: #ffffff;
  --bg-sunken: #e7e9f1;
  --bg-hover: rgba(20, 22, 34, 0.05);
  --bg-active: rgba(20, 22, 34, 0.09);
  --overlay-scrim: rgba(20, 22, 34, 0.35);

  --text-primary: #14161d;
  --text-secondary: #454b60;
  /* #5c6178 dá 4.61:1 sobre --bg-surface branco — acima do mínimo AA de
     4.5:1 pra texto normal (mesmo padrão de medição usado no tema escuro,
     ver comentário original de --text-muted acima). */
  --text-muted: #5c6178;
  --text-disabled: #9aa0b4;

  --border: #dcdfe9;
  --border-strong: #c5c9da;
}