/* CÓPIA de web/src/tokens.css. Não edite aqui: ver landing/README.md (como ressincronizar). Só esta linha difere do original.
   Os nomes antigos (--ground, --action…) continuam como aliases para não mexer nos componentes. */
:root {
  /* ação e marca */
  --color-grafite: #111318;        /* ação primária (18,6:1 com branco) */
  --color-grafite-hover: #2a2d34;
  --color-grafite-sutil: #f1f2f4;
  --color-azul: #2f5bea;           /* foco, links, ativo, info (5,5:1 no branco) */
  --color-azul-texto: #2448c8;     /* texto sobre azul sutil (6,6:1) */
  --color-azul-sutil: #eef2fe;
  --color-azul-selecao: #d9e2fd;
  --color-gravacao: #d92d20;       /* só gravador: botão, ponto, onda */
  --color-gravacao-texto: #b42318;
  --color-gravacao-sutil: #fef3f2;
  /* interface */
  --color-fundo: #ffffff;
  --color-lateral: #f9f9fa;
  --color-superficie: #ffffff;
  --color-superficie-2: #f4f4f6;
  --color-borda: #e5e6ea;
  --color-borda-forte: #868b95;    /* campos (3,4:1) */
  --color-texto: #0f1115;
  --color-apoio: #555b66;          /* 6,8:1 */
  --color-sucesso: #1e7a46;
  --color-alerta: #8a5200;
  --color-alerta-sutil: #fdf6e9;
  --color-erro: #b42318;
  --color-sombra: 15 17 21;

  /* espaço (base 4) e raio */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px;
  --radius-sm: 8px; --radius-control: 10px; --radius-md: 10px; --radius-lg: 16px; --radius-pill: 999px;

  --font-ui: "Inter Variable", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-titulo: var(--font-ui);

  /* tipografia: escala 12/13/14/16/20/24/32, pesos 400/500/600 */
  --weight-regular: 400;   /* corpo, meta */
  --weight-medium: 500;    /* rótulos, botões, abas, nomes em lista */
  --weight-strong: 600;    /* títulos */
  --text-display: 2rem;      --leading-display: 2.5rem;  --track-display: -0.022em;  /* 32/40 */
  --text-headline: 1.5rem;   --leading-headline: 2rem;   --track-headline: -0.019em; /* 24/32 título de página */
  --text-title: 1.25rem;     --leading-title: 1.75rem;   --track-title: -0.012em;    /* 20/28 título de seção */
  --text-section: 1rem;      --leading-section: 1.5rem;                              /* 16/24 subtítulo (600) */
  --text-body: 1rem;         --leading-body: 1.5rem;                                 /* 16/24 corpo e chat */
  --text-label: 0.875rem;    --leading-label: 1.25rem;                               /* 14/20 rótulo, botão, lista */
  --text-meta: 0.8125rem;    --leading-meta: 1.125rem;                               /* 13/18 meta, ajuda, erro */
  --text-caption: 0.75rem;   --leading-caption: 1rem;    --track-caption: 0.04em;    /* 12/16 sobretítulo, selo */

  /* aliases usados por styles.css */
  --ground: var(--color-fundo);
  --surface-subtle: var(--color-superficie-2);
  --card: var(--color-superficie);
  --ink: var(--color-texto);
  --quiet: var(--color-apoio);
  --line: var(--color-borda);
  --line-strong: var(--color-borda-forte);
  --action: var(--color-grafite);
  --action-hover: var(--color-grafite-hover);
  --action-soft: var(--color-grafite-sutil);
  --action-ink: #ffffff;
  --rest: var(--color-superficie-2);
  --danger: var(--color-erro);
  --focus: var(--color-azul);
  --record: var(--color-gravacao);
  --selection: var(--color-azul-selecao);
  /* ajustes de interface v1: lista, foco só de teclado, barra superior */
  --bg: var(--ground);
  --item-h: 56px; --topbar-h: 56px; --hit-min: 44px;
  --text-sm: 0.8125rem; --leading-sm: 1.125rem;   /* 13/18 */
  --text-xs: 0.75rem;   --leading-xs: 1rem;       /* 12/16 */
  --surface-hover: color-mix(in srgb, var(--color-texto) 6%, var(--bg));
  --surface-active: color-mix(in srgb, var(--color-azul) 10%, var(--bg));
  --border-active: var(--color-azul);
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--focus); /* azul 5,5:1 no branco */
  /* compatibilidade com nomes da v2 */
  --color-indigo: var(--color-azul);
  --color-indigo-texto: var(--color-azul-texto);
  --color-indigo-sutil: var(--color-azul-sutil);

  /* chat v2 (protótipo de Produto, 16/10/2026) */
  --border-control: #8f939c;       /* bordas de campos e controles: 3:1 (contraste.md) */
  --danger-strong: #b42318;
  --danger-ink: #ffffff;
  --mark-bg: #111318;
  --border-sug: var(--color-azul);
  --wave-off: color-mix(in srgb, var(--ink) 52%, var(--color-superficie-2));
  --bg: var(--ground);
  --surface-hover: color-mix(in srgb, var(--color-texto) 6%, var(--bg));
  --surface-active: color-mix(in srgb, var(--color-azul) 10%, var(--bg));
  --border-active: var(--color-azul);
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--focus);
  --shadow-1: 0 1px 2px rgb(var(--color-sombra) / 6%), 0 1px 1px rgb(var(--color-sombra) / 4%);
}


/* Tema escuro (chat v2). Tokens finais de Produto: produto/prototipo-chat-v2/tokens-escuro.css.
   Ativa com [data-theme="dark"]; sem escolha explícita, segue o sistema. */
[data-theme="dark"] {
  --color-grafite:#eceef2;
  --color-grafite-hover:#d3d6dc;
  --color-grafite-sutil:#23262d;
  --color-azul:#7c9cff;
  --color-azul-texto:#a6baff;
  --color-azul-sutil:#1a2140;
  --color-azul-selecao:#2a3768;
  --color-gravacao:#ff6b5e;
  --color-gravacao-texto:#ff9188;
  --color-gravacao-sutil:#35161393;
  --color-fundo:#0e1014;
  --color-lateral:#121419;
  --color-superficie:#171a20;
  --color-superficie-2:#1f2229;
  --color-borda:#2a2e36;
  --color-borda-forte:#7a808c;
  --color-texto:#eceef2;
  --color-apoio:#a4aab5;
  --color-sucesso:#4bc489;
  --color-alerta:#f0b458;
  --color-alerta-sutil:#2a2112;
  --color-erro:#ff8a80;
  --color-sombra:0 0 0;
  --danger-strong:#ef5f55;
  --mark-bg:#2b2f38;
  --border-control:#6b717c;
  --wave-off:color-mix(in srgb,var(--ink) 45%,var(--color-superficie-2));
  --danger-ink:#0e1014;
  --action-ink:#0e1014;
  --border-sug:var(--color-azul);
  /* aliases semânticos (iguais ao claro, apontam para as variáveis acima) */
  --ground:var(--color-fundo);
  --card:var(--color-superficie);
  --ink:var(--color-texto);
  --quiet:var(--color-apoio);
  --line:var(--color-borda);
  --line-strong:var(--color-borda-forte);
  --action:var(--color-grafite);
  --action-hover:var(--color-grafite-hover);
  --action-soft:var(--color-grafite-sutil);
  --focus:var(--color-azul);
  --bg:var(--ground);
  --surface-hover:color-mix(in srgb,var(--color-texto) 6%,var(--bg));
  --surface-active:color-mix(in srgb,var(--color-azul) 10%,var(--bg));
  --border-active:var(--color-azul);
  --focus-ring:0 0 0 2px var(--bg),0 0 0 4px var(--focus);
  --shadow-1:0 1px 2px rgb(var(--color-sombra)/.06),0 1px 1px rgb(var(--color-sombra)/.04);
  /* aliases do app que o protótipo não tem */
  --surface-subtle: var(--color-superficie-2);
  --rest: var(--color-superficie-2);
  --danger: var(--color-erro);
  --record: var(--color-gravacao);
  --selection: var(--color-azul-selecao);
  --color-indigo: var(--color-azul);
  --color-indigo-texto: var(--color-azul-texto);
  --color-indigo-sutil: var(--color-azul-sutil);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --color-grafite:#eceef2;
  --color-grafite-hover:#d3d6dc;
  --color-grafite-sutil:#23262d;
  --color-azul:#7c9cff;
  --color-azul-texto:#a6baff;
  --color-azul-sutil:#1a2140;
  --color-azul-selecao:#2a3768;
  --color-gravacao:#ff6b5e;
  --color-gravacao-texto:#ff9188;
  --color-gravacao-sutil:#35161393;
  --color-fundo:#0e1014;
  --color-lateral:#121419;
  --color-superficie:#171a20;
  --color-superficie-2:#1f2229;
  --color-borda:#2a2e36;
  --color-borda-forte:#7a808c;
  --color-texto:#eceef2;
  --color-apoio:#a4aab5;
  --color-sucesso:#4bc489;
  --color-alerta:#f0b458;
  --color-alerta-sutil:#2a2112;
  --color-erro:#ff8a80;
  --color-sombra:0 0 0;
  --danger-strong:#ef5f55;
  --mark-bg:#2b2f38;
  --border-control:#6b717c;
  --wave-off:color-mix(in srgb,var(--ink) 45%,var(--color-superficie-2));
  --danger-ink:#0e1014;
  --action-ink:#0e1014;
  --border-sug:var(--color-azul);
  /* aliases semânticos (iguais ao claro, apontam para as variáveis acima) */
  --ground:var(--color-fundo);
  --card:var(--color-superficie);
  --ink:var(--color-texto);
  --quiet:var(--color-apoio);
  --line:var(--color-borda);
  --line-strong:var(--color-borda-forte);
  --action:var(--color-grafite);
  --action-hover:var(--color-grafite-hover);
  --action-soft:var(--color-grafite-sutil);
  --focus:var(--color-azul);
  --bg:var(--ground);
  --surface-hover:color-mix(in srgb,var(--color-texto) 6%,var(--bg));
  --surface-active:color-mix(in srgb,var(--color-azul) 10%,var(--bg));
  --border-active:var(--color-azul);
  --focus-ring:0 0 0 2px var(--bg),0 0 0 4px var(--focus);
  --shadow-1:0 1px 2px rgb(var(--color-sombra)/.06),0 1px 1px rgb(var(--color-sombra)/.04);
  /* aliases do app que o protótipo não tem */
  --surface-subtle: var(--color-superficie-2);
  --rest: var(--color-superficie-2);
  --danger: var(--color-erro);
  --record: var(--color-gravacao);
  --selection: var(--color-azul-selecao);
  --color-indigo: var(--color-azul);
  --color-indigo-texto: var(--color-azul-texto);
  --color-indigo-sutil: var(--color-azul-sutil);
  color-scheme: dark;
  }
}