/**
 * Design tokens da UpperTools — extraídos de Ferramentas/design-system.html
 * (Plano §1): até aqui cada ferramenta da casa reimplementava um subconjunto
 * dessas variáveis; este é o arquivo único, importado por toda tela do CRM
 * e embutido no HTML offline do vendedor (Marco 11).
 *
 * Fontes: auto-hospedadas (Plano §1 — CDN quebraria o HTML offline). Os
 * arquivos .woff2 ainda não foram copiados para web/fontes/ (ver README);
 * até lá, a pilha cai no fallback genérico sem quebrar o layout.
 *
 * Tema claro/escuro (Marco 4, decisão de Alexandre 2026-08-19): a paleta
 * CLARA é a base em :root; a paleta ESCURA sobrescreve os mesmos nomes de
 * variável sob `prefers-color-scheme: dark` (acompanha o SO automaticamente)
 * e de novo sob `[data-theme="dark"]` (escolha explícita do usuário, gravada
 * em localStorage por web/tema.js, vence o SO). Nenhum componente em
 * layout.css precisa saber qual tema está ativo — só usa os mesmos nomes.
 *
 * A barra lateral é a exceção: fica sempre escura nos dois temas (identidade
 * de marca, como em várias ferramentas da casa) — por isso usa o bloco
 * `--barra-*` à parte, que nunca muda de valor.
 */
:root {
  /* BARRA LATERAL — fixa, não acompanha o tema (ver comentário acima) */
  --barra-bg:            #080808;
  --barra-borda:         #2E2E2E;
  --barra-texto:         #ADADAD;
  --barra-texto-forte:   #F0F0F0;
  --barra-texto-fraco:   #828282;
  --barra-rotulo:        #5C5C5C;
  --barra-desabilitado:  #3A3A3A;
  --barra-hover-bg:      #242424;
  --barra-ativo-bg:      rgba(123, 45, 139, 0.12);
  --barra-ativo-texto:   #BA6ECA;

  /* MARCA — roxo e amarelo não mudam de tom entre temas (usados como
     preenchimento sólido de botão/badge, nunca como texto direto sobre o
     fundo da página) */
  --purple-dark:   #4A1260;
  --purple:        #7B2D8B;
  --purple-mid:    #9B3DAB;
  --yellow:        #F5C400;
  --yellow-dark:   #C9A000;

  /* Constantes absolutas — nunca mudam de valor entre temas (texto sobre
     --yellow, que também não muda) */
  --black:      #080808;
  --white-pure: #FFFFFF;

  /* TIPOGRAFIA */
  --font-display:  'Barlow Condensed', sans-serif;
  --font-body:     'Barlow', sans-serif;
  --font-mono:     'JetBrains Mono', monospace;

  /* ESPAÇAMENTO */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* BORDAS */
  --radius-sm:  2px;
  --radius-md:  4px;
  --radius-lg:  8px;
  --radius-xl:  16px;

  /* SOMBRAS — preto translúcido funciona como profundidade nos dois temas */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.18);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.22);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.28);
  --shadow-purple: 0 0 24px rgba(123, 45, 139, 0.25);
  --shadow-yellow: 0 0 24px rgba(245, 196, 0, 0.25);

  /* ---- Paleta CLARA (base — o que se aplica sem preferência de SO nem
     escolha explícita, e quando o usuário escolhe "claro" de propósito) ---- */
  --dark-1:  #F4F4F5;
  --dark-2:  #FFFFFF;
  --dark-3:  #EDEDEF;
  --dark-4:  #DCDCE0;

  --steel-900: #C8C8CC;
  --steel-700: #9A9AA0;
  --steel-500: #68686E;
  --steel-300: #45454B;
  --steel-100: #2A2A2E;

  --white: #16161A;

  --purple-light: #7B2D8B;
  --purple-ghost:  rgba(123, 45, 139, 0.10);
  --yellow-texto:  #8A6800;

  --success: #1E8449;
  --warning: #A66A08;
  --danger:  #C0392B;
  --info:    #1F618D;

  --overlay-hover: rgba(0, 0, 0, 0.04);

  color-scheme: light;
}

/* Acompanha o SO quando o usuário nunca escolheu um tema explicitamente
   (web/tema.js só grava `data-theme` depois de um clique no botão). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --dark-1: #111111;
    --dark-2: #1A1A1A;
    --dark-3: #242424;
    --dark-4: #2E2E2E;

    --steel-900: #3A3A3A;
    --steel-700: #5C5C5C;
    --steel-500: #828282;
    --steel-300: #ADADAD;
    --steel-100: #D4D4D4;

    --white: #F0F0F0;

    --purple-light: #BA6ECA;
    --purple-ghost:  rgba(123, 45, 139, 0.12);
    --yellow-texto:  #F5C400;

    --success: #2ECC71;
    --warning: #F39C12;
    --danger:  #E74C3C;
    --info:    #3498DB;

    --overlay-hover: rgba(255, 255, 255, 0.05);

    color-scheme: dark;
  }
}

/* Escolha explícita do usuário (botão de tema) — vence o SO nos dois sentidos. */
:root[data-theme="dark"] {
  --dark-1: #111111;
  --dark-2: #1A1A1A;
  --dark-3: #242424;
  --dark-4: #2E2E2E;

  --steel-900: #3A3A3A;
  --steel-700: #5C5C5C;
  --steel-500: #828282;
  --steel-300: #ADADAD;
  --steel-100: #D4D4D4;

  --white: #F0F0F0;

  --purple-light: #BA6ECA;
  --purple-ghost:  rgba(123, 45, 139, 0.12);
  --yellow-texto:  #F5C400;

  --success: #2ECC71;
  --warning: #F39C12;
  --danger:  #E74C3C;
  --info:    #3498DB;

  --overlay-hover: rgba(255, 255, 255, 0.05);

  color-scheme: dark;
}

:root[data-theme="light"] {
  color-scheme: light;
}

@font-face {
  font-family: 'Barlow Condensed';
  font-weight: 400 900;
  font-display: swap;
  src: url('fontes/barlow-condensed.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-weight: 300 700;
  font-display: swap;
  src: url('fontes/barlow.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-weight: 400 500;
  font-display: swap;
  src: url('fontes/jetbrains-mono.woff2') format('woff2');
}

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

html {
  scroll-behavior: smooth;
}

body {
  background: var(--dark-1);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  min-height: 100vh;
  transition: background-color 0.15s ease, color 0.15s ease;
}