/* Cores, fundos, cantos e linhas do Octa Market (projeto 18.2). So variaveis: usado pelo painel (com octa-marca.css)
   e pela OCTA IA (/orq), para as duas telas terem o mesmo visual. Trocar a cor da marca = mudar aqui.
   Cor da marca: verde esmeralda desde 11/11 (Rangel; antes violeta #5B4FE0). Os nomes --octa-violeta* ficaram por compatibilidade. */
:root {
  --octa-esmeralda: #047857; --octa-esmeralda-hover: #065F46; --octa-esmeralda-texto: #047857; --octa-esmeralda-suave: #E6F4EE; --octa-esmeralda-claro: #34D399;
  --octa-violeta: var(--octa-esmeralda); --octa-violeta-hover: var(--octa-esmeralda-hover); --octa-violeta-texto: var(--octa-esmeralda-texto); --octa-violeta-suave: var(--octa-esmeralda-suave); --octa-violeta-claro: var(--octa-esmeralda-claro);
  --octa-abismo: #000710; --octa-carvao: #15191e; --octa-tinta: #000000; --octa-papel: #ffffff; --octa-nevoa: #f3f3f7;
  --octa-bruma: #b9bbc6; --octa-aco: #8b8d98; --octa-estanho: #6f737b; --octa-grafite: #60646c;
  /* nomes antigos usados pelo editor visual */
  --octa-coral: var(--octa-violeta);

  --frame: var(--octa-abismo); --frame-hover: var(--octa-carvao); --frame-active: #1f242b; --frame-line: #1c2027;
  --frame-ink: #e4e5ea; --frame-muted: var(--octa-aco); --frame-field: var(--octa-carvao); --frame-field-border: #2a2f37;
  --bg: var(--octa-nevoa); --surface: var(--octa-papel); --surface-sunken: #f7f7fa; --surface-subtle: #fafafc; --surface-raised: var(--octa-papel);
  --ink: var(--octa-tinta); --muted: var(--octa-grafite);
  --border: #e3e4ea; --divider: #ececf1; --border-strong: var(--octa-bruma); --control-border: var(--octa-bruma);
  --action: var(--octa-violeta); --action-hover: var(--octa-violeta-hover); --on-action: #ffffff; --action-soft: var(--octa-violeta-suave);
  --link: var(--octa-violeta-texto); --focus: var(--octa-violeta); --accent: var(--octa-violeta); --selection: #BBE8D3; --tab-active: var(--octa-violeta-suave);
  --neutral-soft: #ececf1; --skeleton: #e3e4ea; --skeleton-shine: #f3f3f7; --chart-grid: #ececf1;
  --shadow-card: 0 0 0 1px var(--border); --shadow-card-hover: 0 0 0 1px var(--octa-bruma);
  --shadow-btn: 0 0 0 1px var(--octa-bruma) inset; --shadow-btn-primary: none; --shadow-btn-danger: none;
  --radius-control: 12px; --radius-item: 12px; --radius-card: 12px; --radius-panel: 12px; --radius-tag: 6px;
}
:root[data-theme="dark"] {
  --frame: var(--octa-abismo); --frame-hover: var(--octa-carvao); --frame-active: #20252c; --frame-line: #1a1e24;
  --bg: #0a0e14; --surface: var(--octa-carvao); --surface-sunken: #11151a; --surface-subtle: #1a1f25; --surface-raised: #1c2127;
  --ink: #f3f3f7; --muted: var(--octa-bruma);
  --border: #2a2f37; --divider: #23282f; --border-strong: #3a404a; --control-border: #4a505a;
  --action: #10B981; --action-hover: var(--octa-esmeralda-claro); --on-action: #022C1E; --action-soft: #0A2A20;
  --link: var(--octa-violeta-claro); --focus: var(--octa-violeta-claro); --accent: var(--octa-violeta-claro); --selection: #0F4031; --tab-active: #0A2A20;
  --neutral-soft: #262b33; --skeleton: #20252c; --skeleton-shine: #2a2f37; --chart-grid: #23282f;
  --shadow-card: 0 0 0 1px var(--border); --shadow-card-hover: 0 0 0 1px var(--border-strong);
  --shadow-btn: 0 0 0 1px var(--border-strong) inset; --shadow-btn-primary: none; --shadow-btn-danger: none;
}