/* ============================================================
   ORIZON MANAGER — DESIGN TOKENS
   Padrao_Design_Orizon v10 → tokens.css v1.7
   v1.7: novo padrão de campo com RÓTULO FLUTUANTE (label dentro do
   campo, canto superior esquerdo) — --control-h-float, substitui o
   padrão label-acima em formulários densos. Componente "Linha de
   Total" formalizado com tamanho único de valor, para não haver mais
   de um tamanho de "total" na mesma tela.
   v1.6: novo token --field-border (+ --field-border-hover), dedicado à
   demarcação de campos editáveis nos dois temas — mais contraste que
   o --border genérico (usado em cards/divisores), que era fraco
   demais para comunicar onde um campo começa e termina.
   v1.1: tema escuro migra o realce de menta para COBRE/BRONZE ENVELHECIDO
   (variação F aprovada) — --accent-line #532A14 em bordas/filetes, texto
   interativo #A56B45 com piso de legibilidade, --warn afastado para
   amarelo-ouro. Tema claro segue inalterado (petróleo) por enquanto.
   v1.2: fundos do tema escuro migram de petróleo para CARVÃO QUENTE (H2,
   "metade do calor") — neutros levemente aquecidos que assentam o cobre.
   Sidebar acompanha nos dois temas.
   v1.3: semânticas suavizadas — erro migra para VINHO (texto empoeirado
   --err + borda profunda --err-line), warn para ocre contido, ok/info
   dessaturados. Bordas semânticas usam sempre os tokens *-line (mais
   escuros que o texto), seguindo a mesma lógica do cobre.
   v1.4: dimensões padronizadas — grade única de alturas para todos os
   controles (--control-h-*) e larguras de campo por tipo de dado
   (--field-xs…lg). Taxonomia: Ação / Entrada / Indicador / Navegação.
   v1.5: tema claro migra de petróleo/cinza-frio para AREIA + COBRE — a
   mesma família do escuro, só muda a temperatura de fundo. --accent
   passa a ser cobre #8C5230 nos dois temas; botão primário vira
   cinza-quente #5C5650 (paralelo do cinza-quente escuro). Os dois temas
   passam a compartilhar uma única identidade cromática.
   ------------------------------------------------------------
   REGRAS INEGOCIÁVEIS (v9/v10):
   1. Nenhum componente declara cor em hex literal — sempre var(--token).
   2. Botão primário: máximo 1 por tela. Usa tokens --btn-primary-*,
      deliberadamente diferentes de --accent (decisão de design, não bug).
   3. --accent vale para: menu ativo, links, foco, badges, sublinhado de aba.
   4. Botão secundário: borda visível no tema claro; sem borda (só sombra)
      no tema escuro — regra condicional por tema.
   ============================================================ */

/* ---------- TEMA CLARO (padrão) ---------- */
:root,
[data-theme="light"] {
  /* Superfícies e fundo — areia clara, paralelo direto do carvão H2 */
  --bg:            #FAF8F6;
  --surface:       #FFFFFF;
  --surface-2:     #F5F1EC;
  --border:        #E5DFD8;
  --border-strong: #D3CAC0;
  --field-border:  #B8ADA0;   /* demarcação de campo editável — contraste mais alto que --border */
  --field-border-hover: #948A7F;

  /* Texto */
  --text:          #2B2621;
  --text-2:        #6B6259;
  --text-3:        #948A7F;
  --text-inverse:  #FFFFFF;

  /* Acento — cobre (navegação, links, foco, badges, aba ativa).
     v1.5: substitui o petróleo — os dois temas passam a compartilhar
     a mesma família cromática, só a temperatura de fundo muda. */
  --accent:        #8C5230;
  --accent-hover:  #6E3F22;
  --accent-soft:   rgba(140,82,48,.12);   /* fundo de item ativo / badge tint */
  --accent-on-soft:#8C5230;               /* texto de acento sobre o tint */
  --accent-vivid:  #B8823D;               /* dourado — realces pontuais */
  --accent-line:   #6E3F22;               /* filetes de realce no claro */

  /* Botão primário — token próprio, ≠ accent (v10). Cinza-quente,
     paralelo do --btn-primary-bg escuro, sem matiz de marca. */
  --btn-primary-bg:     #5C5650;
  --btn-primary-text:   #FFFFFF;
  --btn-primary-border: transparent;
  --btn-primary-shadow: 0 2px 8px rgba(0,0,0,.12);
  --btn-primary-bg-hover: #46413C;

  /* Botão secundário */
  --btn-secondary-bg:     var(--surface-2);
  --btn-secondary-border: var(--border);   /* borda VISÍVEL no claro */

  /* Semânticas */
  --ok:        #1E7F4F;
  --ok-soft:   #E3F3EA;
  --ok-line:   #9CC7AD;
  --warn:      #8F6E2A;   /* ocre contido em vez de âmbar */
  --warn-soft: #F7EFDC;
  --warn-line: #D8C08B;
  --err:       #9C4147;   /* vinho — puxa para o vermelho sem estridência */
  --err-soft:  #F7E9EA;
  --err-line:  #D8A6A9;
  --cancel:    #6B4423;   /* marrom escuro — cancelamento de contrato (sério, distinto do coral de "danger") */
  --cancel-on: #FFFFFF;
  --info:      #21618F;
  --info-soft: #E4EFF7;
  --info-line: #A9C3D8;

  /* Sombras */
  --shadow:    0 1px 3px rgba(0,0,0,.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,.10);

  /* Sidebar (accordion, módulos sempre visíveis — superfície escura nos dois temas) */
  --sidebar-bg:          #141312;
  --sidebar-text:        #B5B2AD;
  --sidebar-text-active: #FFFFFF;
  --sidebar-item-active: rgba(165,107,69,.14);
  --sidebar-accent:      #C9976D;   /* sidebar é escura nos dois temas — cobre nos dois */
  --sidebar-border:      rgba(255,255,255,.07);
}

/* ---------- TEMA ESCURO ---------- */
[data-theme="dark"] {
  --bg:            #121111;
  --surface:       #1A1918;
  --surface-2:     #211F1D;
  --border:        #2B2926;
  --border-strong: #3B3833;
  --field-border:  #4E4842;   /* demarcação de campo editável — contraste mais alto que --border */
  --field-border-hover: #635B52;

  --text:          #EAE8E5;
  --text-2:        #A9A6A2;
  --text-3:        #78746F;
  --text-inverse:  #171514;

  --accent:        #A56B45;   /* cobre — links e texto interativo (piso de legibilidade) */
  --accent-hover:  #B87E55;
  --accent-soft:   rgba(83,42,20,.22);
  --accent-on-soft:#C9976D;   /* texto de acento sobre o tint (cobre claro) */
  --accent-vivid:  #C9976D;   /* cobre claro — realces de texto sobre tint */
  --accent-line:   #532A14;   /* bronze envelhecido — bordas e filetes de realce (v11/F) */

  /* Botão primário — fundo aquecido + linha bronze + sombra forte (v11/F sobre carvão H2) */
  --btn-primary-bg:     #1C1613;
  --btn-primary-text:   #E7DCD0;
  --btn-primary-border: #532A14;              /* linha de realce — junto da sombra, é ela que destaca */
  --btn-primary-shadow: 0 6px 16px rgba(0,0,0,.65);  /* mais forte que --shadow */
  --btn-primary-bg-hover: #262019;

  --btn-secondary-bg:     var(--surface-2);
  --btn-secondary-border: transparent;   /* SEM borda no escuro, só sombra */

  --ok:        #86B394;   /* sálvia empoeirada */
  --ok-soft:   rgba(134,179,148,.12);
  --ok-line:   #3E5C49;
  --warn:      #C2A264;   /* ocre suave — sem amarelo estridente */
  --warn-soft: rgba(194,162,100,.12);
  --warn-line: #6B5528;
  --err:       #C08183;   /* rosa-vinho empoeirado — piso de legibilidade */
  --err-soft:  rgba(107,49,56,.20);
  --err-line:  #6B3138;   /* vinho profundo — bordas de erro/perigo */
  --cancel:    #8B5E3C;   /* marrom médio — legível sobre fundo escuro */
  --cancel-on: #FFFFFF;
  --info:      #8BA6BD;   /* azul empoeirado */
  --info-soft: rgba(139,166,189,.12);
  --info-line: #3C5468;

  --shadow:    0 1px 3px rgba(0,0,0,.35);
  --shadow-md: 0 6px 16px rgba(0,0,0,.45);

  --sidebar-bg:          #0D0C0B;
  --sidebar-text:        #A5A29D;
  --sidebar-text-active: #FFFFFF;
  --sidebar-item-active: rgba(165,107,69,.14);
  --sidebar-accent:      #C9976D;   /* item ativo em cobre claro */
  --sidebar-border:      rgba(255,255,255,.06);
}

/* ---------- TOKENS INDEPENDENTES DE TEMA ---------- */
:root {
  /* Tipografia */
  --font-display: "Montserrat", -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Inter", -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  --fs-h1: 1.5rem;    /* 24px — título de página */
  --fs-h2: 1.125rem;  /* 18px — título de seção/card */
  --fs-h3: 0.9375rem; /* 15px — subtítulo */
  --fs-body: 0.875rem;/* 14px — corpo padrão de UI */
  --fs-sm: 0.8125rem; /* 13px — tabelas densas, metadados */
  --fs-xs: 0.6875rem; /* 11px — badges, eyebrows */

  /* Espaçamento (escala de 4px) */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;

  /* Raios */
  --radius-sm: 6px;   /* inputs, badges */
  --radius:    10px;  /* botões, cards internos */
  --radius-lg: 14px;  /* cards, modais */

  /* Controles — grade ÚNICA de alturas, compartilhada por botões E campos.
     Regra: na mesma linha, todo controle tem a mesma altura. */
  --control-h-sm: 30px;  /* barras de filtro densas */
  --control-h:    38px;  /* padrão de formulários */
  --control-h-lg: 44px;  /* ação principal de páginas de destaque */
  --control-h-float: 52px; /* campo com rótulo flutuante — label + valor em duas linhas */
  --btn-h-sm: var(--control-h-sm);
  --btn-h:    var(--control-h);
  --btn-h-lg: var(--control-h-lg);

  /* Campos — largura pelo TIPO DE DADO, nunca decidida por tela.
     xs: UF, qtd · sm: CEP, data · md: CPF/CNPJ, telefone
     lg: e-mail, nome · full: endereço, observações */
  --field-xs:  90px;
  --field-sm:  160px;
  --field-md:  240px;
  --field-lg:  360px;

  /* Foco (acessibilidade) */
  --focus-ring: 0 0 0 3px var(--accent-soft), 0 0 0 1.5px var(--accent);

  /* Transições */
  --t-fast: 120ms ease;
  --t:      200ms ease;
}