/* EasyFarm — identidade visual
 *
 * Fonte única de cor, tipografia, espaço e raio. Nenhuma tela usa valor literal.
 *
 * ORIGEM: `docs/design/` — **v2, a geração canônica**, declarada em `docs/design/README.md`.
 * `EasyFarm - Identidade Visual v2.dc.html` traz a marca, os tokens e a biblioteca de
 * componentes; `EasyFarm - Sistema Web v2.dc.html` traz as telas. Importado em 18/09/2026.
 *
 * A v1 (Poppins + IBM Plex, neutros mais escuros) fica no pacote só como registro da
 * evolução — o próprio README manda **não implementá-la**.
 *
 * **Em UI/UX o desenho vence este arquivo e qualquer documento nosso.** Onde divergirem,
 * quem muda somos nós. Contraste continua sendo medido, não presumido: a tabela está em
 * `brand/MARCA.md`.
 */

@import url("https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..24,400,0,0&display=block");

:root {
  /* ---------- verde da marca ---------- */
  --ef-green-900: #0b2e1c; /* reserva para texto sobre o verde-brote */
  --ef-green-800: #123f25; /* hover do primário · também o café no gráfico */
  --ef-green-700: #1a5b31; /* BASE — botão, link, ícone ativo */
  --ef-green-500: #2f9a4a; /* borda de foco, barra de progresso, positivo */
  --ef-green-400: #3fc060; /* BROTE — destaque, indicador ativo, badge */
  --ef-green-100: #dcf3e2; /* fundo de tile de ícone e de chip positivo */

  /* Os nomes que o produto usa. */
  --ef-brand: var(--ef-green-700);
  --ef-brand-pressed: var(--ef-green-800);
  --ef-brand-soft: #eff9f1;
  --ef-brand-on: #ffffff;
  --ef-bright: var(--ef-green-400);
  --ef-bright-soft: var(--ef-green-100);
  /* O verde vivo rebaixado até virar legível sobre claro. O 400 sozinho reprova. */
  --ef-bright-ink: #14522a;

  /* ---------- superfície escura ---------- */
  --ef-deep: #072f2b; /* PETRÓLEO — barra lateral, cartão escuro de KPI, painel do login */
  --ef-deep-2: rgba(255, 255, 255, 0.07); /* hover de item, cartão dentro do petróleo */
  --ef-deep-3: rgba(255, 255, 255, 0.12); /* item ativo */
  --ef-deep-borda: rgba(255, 255, 255, 0.1);
  /* Texto sobre o petróleo. Nunca use `--ef-ink-*` sobre escuro. */
  --ef-on-deep: #c2d5cf;
  --ef-on-deep-2: rgba(255, 255, 255, 0.74);
  --ef-on-deep-3: rgba(255, 255, 255, 0.55);
  --ef-on-deep-4: rgba(255, 255, 255, 0.42);
  /* Borda de botão secundário sobre o petróleo — v3 §4. */
  --ef-on-deep-borda-24: rgba(255, 255, 255, 0.24);

  /* ---------- superfície clara ---------- */
  --ef-bg: #f4f6f4; /* fundo da aplicação */
  --ef-surface: #ffffff; /* cartão */
  --ef-surface-campo: #f7f9f7; /* input dentro de barra de filtro */
  --ef-surface-zebra: #f9fbf9; /* cabeçalho de tabela e hover de linha */
  --ef-surface-sunken: #f1f4f1; /* trilho, estado desabilitado */
  --ef-surface-muted: var(--ef-surface-sunken);
  --ef-border: #e3e8e3; /* borda de cartão e de input */
  --ef-border-field: #dde3dd;
  /* Campo preenchido/obrigatório e hover de cartão clicável. */
  --ef-border-forte: #c9d2cb;
  /* Divisores, do mais escuro ao mais claro conforme sobe a hierarquia. */
  --ef-divider: #e8ece8;
  --ef-divider-2: #eef1ee;
  --ef-divider-linha: #f1f4f1;

  /* ---------- texto ---------- */
  --ef-ink: #14211a; /* TINTA — texto principal */
  --ef-ink-2: #3a463e; /* GRAFITE — secundário, rótulo de campo */
  --ef-ink-3: #6b766e; /* SECUNDÁRIO — rótulo de KPI, texto de apoio */
  --ef-ink-4: #8b948d; /* APOIO — metadado, subtítulo, header de tabela */
  /* PLACEHOLDER — unidade, overline. O mais claro da escala; não é corpo de texto. */
  --ef-ink-5: #9ba69e;
  --ef-ink-icone: #5a6560; /* ícone de botão neutro */

  /* ---------- semânticas ---------- */
  /* Cada estado tem tinta, fundo e **ícone** próprios — cor nunca vem sozinha. */
  --ef-success: var(--ef-green-500);
  --ef-success-ink: #14522a;
  --ef-success-soft: #dcf3e2;
  --ef-success-border: #b7e0c3; /* borda do aviso de sucesso — `ESPECIFICACAO.md` §5.16 */
  --ef-success-delta: #e7f5ee; /* fundo do delta positivo no KPI */

  --ef-warning: #c08a18; /* milho/âmbar no gráfico */
  --ef-warning-ink: #7a5605;
  --ef-warning-text: #5c4205;
  --ef-warning-soft: #fbf0d5;
  /* A borda do aviso e do cartão de atenção — `estatico/fluxo.html` e `estatico/lcdpr.html`. */
  --ef-warning-border: #e5cf94;

  --ef-danger: #b4452e;
  --ef-danger-ink: #8a3120;
  --ef-danger-soft: #fae3de;
  --ef-danger-border: #f0cdc4;

  --ef-info: #2a6e8f; /* CLIMA */
  --ef-info-ink: #1c4f66;
  --ef-info-soft: #dcebf3;
  --ef-info-bg: #eef6fa; /* tile de dia chuvoso */

  --ef-descanso: #dde3dd; /* talhão em descanso, no mapa */

  /* ---------- a Zefa ---------- */
  /*
   * **A assistente tem paleta própria, e isso é deliberado** — v4 §8.
   *
   * Ela não é uma tela: é uma camada que aparece por cima de qualquer tela. Usar o verde da
   * marca faria o painel dela se confundir com o conteúdo embaixo; o `--ef-zefa-ink` é mais
   * escuro que o `--ef-brand` e mais claro que o petróleo, e é isso que o separa dos dois.
   *
   * Contraste medido em 05/10/2026: branco sobre `ink` dá **11,51**; `ink` sobre `soft`,
   * **10,66**; petróleo sobre `accent`, **5,92**; branco sobre `listening`, **5,48**. O
   * `send-off` dá 1,84 e é o único que reprova — ele pinta o botão **desabilitado**, onde a
   * WCAG não exige contraste, e o estado é dito também pelo `disabled`.
   */
  --ef-zefa-ink: #0a4229;
  --ef-zefa-ink-hover: #1a5b31;
  --ef-zefa-accent: #44bc5b;
  --ef-zefa-accent-hover: #5acb6f;
  --ef-zefa-soft: #f1f8f2;
  --ef-zefa-soft-border: #cfe8d5;
  --ef-zefa-chat-bg: #f7f9f7;
  /* O microfone ativo. Vermelho porque gravação é estado que precisa ser inconfundível. */
  --ef-zefa-listening: #b4452e;
  --ef-zefa-send-off: #b7c2ba;
  --ef-zefa-shadow-fab: 0 10px 28px rgba(7, 47, 43, 0.32);
  --ef-zefa-shadow-panel: 0 18px 48px rgba(7, 47, 43, 0.28);

  /* ---------- tipografia ---------- */
  /*
   * **Hanken Grotesk** na interface, **Geist Mono** nos dados e **Material Symbols
   * Outlined** nos ícones. Decisão da v2, e ela substitui Poppins + IBM Plex da v1.
   *
   * A monoespaçada não é estilo: vai em todo número de tabela, data, dose, R$, sc/ha, lote e
   * coordenada. Sem algarismos tabulares as colunas dançam e o olho não compara.
   */
  --ef-font-ui: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ef-font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  /* A v1 tinha uma família de display separada. A v2 não: o display é a própria interface em
     peso 800. `--ef-font-display` continua existindo e aponta para ela, para nenhuma regra
     antiga quebrar em silêncio. */
  --ef-font-display: var(--ef-font-ui);
  --ef-font-icone: "Material Symbols Outlined";

  /* A escala do desenho, com tamanho/entrelinha/peso fechados. Nenhuma tela inventa degrau. */
  --ef-text-display: 800 31px / 1.1 var(--ef-font-ui);
  --ef-text-page: 800 23px / 1.2 var(--ef-font-ui);
  --ef-text-secao: 800 18px / 1.3 var(--ef-font-ui);
  --ef-text-card: 800 15px / 1.35 var(--ef-font-ui);
  --ef-text-kpi: 800 26px / 1 var(--ef-font-ui);
  --ef-text-topbar: 700 17px / 1.2 var(--ef-font-ui);
  --ef-text-body: 400 13.5px / 1.6 var(--ef-font-ui);
  --ef-text-label: 600 13.5px / 1.35 var(--ef-font-ui);
  --ef-text-filtro: 600 12px / 1.35 var(--ef-font-ui);
  --ef-text-kpi-label: 600 12.5px / 1.35 var(--ef-font-ui);
  --ef-text-small: 400 12.5px / 1.55 var(--ef-font-ui);
  /* Dois degraus que a v3 trouxe com a tela de preço: o input e o valor no cartão. */
  --ef-text-preco-campo: 600 16px / 1.3 var(--ef-font-ui);
  --ef-text-preco-valor: 800 28px / 1 var(--ef-font-ui);
  --ef-text-meta: 700 11.5px / 1.4 var(--ef-font-ui);
  --ef-text-botao: 700 14px / 1.2 var(--ef-font-ui);
  --ef-text-botao-campo: 700 17px / 1.2 var(--ef-font-ui);
  --ef-text-tabela: 700 11px / 1.3 var(--ef-font-ui);
  --ef-text-overline: 700 11px / 1.3 var(--ef-font-ui);
  --ef-text-grupo: 700 10.5px / 1.3 var(--ef-font-ui);
  /* A v1 tinha um degrau de seção de 18/26 usado em aviso e rodapé de tabela. */
  --ef-text-section: var(--ef-text-secao);

  --ef-track-display: -0.03em;
  --ef-track-page: -0.025em;
  --ef-track-kpi: -0.02em;
  --ef-track-tabela: 0.06em;
  --ef-track-overline: 0.08em;
  --ef-track-grupo: 0.12em;

  /* ---------- espaço ---------- */
  /* Base 4. A v2 usa degraus intermediários — 6, 7, 10, 11, 14, 18, 22, 26 — e eles estão
     aqui em vez de virarem literal espalhado pelas telas. */
  --ef-1: 4px;
  --ef-2: 8px;
  --ef-3: 12px;
  --ef-4: 16px;
  --ef-5: 24px;
  --ef-6: 32px;
  --ef-8: 48px;
  --ef-12: 64px;
  --ef-6px: 6px;
  --ef-7px: 7px;
  --ef-10px: 10px;
  --ef-11px: 11px;
  --ef-14px: 14px;
  --ef-18px: 18px;
  --ef-20px: 20px;
  --ef-22px: 22px;
  --ef-26px: 26px;
  --ef-28px: 28px;
  --ef-56px: 56px;

  /* ---------- raio ---------- */
  --ef-r-chip: 8px; /* chip, tag, tile de ícone */
  --ef-r-sm: 9px; /* input, botão, select */
  --ef-r-md: 10px;
  --ef-r-lg: 12px; /* cartão */
  --ef-r-xl: 16px; /* painel de página e cartão de login */
  --ef-r-pill: 999px;
  /* A única forma assimétrica do sistema é o símbolo da marca. Proporcional ao tamanho. */
  --ef-r-marca: 2px 17px 2px 17px;

  /* ---------- elevação ---------- */
  /* Conteúdo não tem sombra: separa por borda. Sombra aqui é o que flutua ou o que age. */
  --ef-sombra-botao: 0 2px 6px rgba(26, 91, 49, 0.3);
  --ef-sombra-botao-baixo: 0 1px 2px rgba(26, 91, 49, 0.4);
  --ef-sombra-cartao-hover: 0 2px 10px rgba(20, 33, 26, 0.06);
  --ef-sombra-painel: 0 6px 30px rgba(20, 33, 26, 0.05);
  --ef-sombra-aba: 0 1px 2px rgba(20, 33, 26, 0.08);
  /* O véu atrás da gaveta. Ele escurece a tela, não some com ela — v3 §4. */
  --ef-scrim: rgba(20, 33, 26, 0.42);
  /* O anel de foco: verde 500 a 14% de opacidade, 3 px. Em campo sobre `--ef-surface-campo`
     o fundo vira branco e o anel usa 12%. */
  --ef-anel-foco: 0 0 0 3px rgba(47, 154, 74, 0.14);
  --ef-anel-foco-claro: 0 0 0 3px rgba(47, 154, 74, 0.12);
  --ef-anel-erro: 0 0 0 3px rgba(180, 69, 46, 0.1);

  /* ---------- densidade e altura de controle ---------- */
  --ef-row-h: 48px;
  --ef-row-pad: 14px;
  --ef-row-font: 13.5px;
  /* As alturas do desenho: 38 na topbar e em filtro compacto, 42 em filtro, 46 na ação de
     tela, 50 no campo de formulário. */
  --ef-control-h-compacto: 38px;
  --ef-control-h-filtro: 42px;
  --ef-control-h: 46px;
  --ef-control-h-campo-form: 50px;
  /* A ação principal no celular: 60 px e largura toda. Polegar, com luva, sob sol. */
  --ef-control-h-campo: 60px;
  --ef-sidebar-w: 242px;
  /* Recolhida: só o ícone de 20 px mais o respiro do item. */
  --ef-sidebar-recolhida-w: 64px;
  --ef-topbar-h: 60px;
  /* Padding de página e largura máxima de conteúdo, do desenho. */
  --ef-conteudo-max: 1480px;
  --ef-formulario-max: 1080px;
}

[data-density="compact"] {
  --ef-row-h: 36px;
  --ef-row-pad: 9px;
  --ef-row-font: 13px;
}

/* ---------------------------------------------------------------
   Regras que valem para o produto inteiro
   --------------------------------------------------------------- */

body {
  margin: 0;
  background: var(--ef-bg);
  color: var(--ef-ink);
  font: var(--ef-text-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--ef-brand);
  text-decoration: none;
}
a:hover {
  color: var(--ef-green-500);
}

input::placeholder,
textarea::placeholder {
  color: var(--ef-ink-5);
}

/* Todo número, dinheiro, área, data, dose e lote usa a monoespaçada com algarismos
   tabulares — senão as colunas dançam e o olho não compara. */
.ef-num {
  font-family: var(--ef-font-mono);
  font-variant-numeric: tabular-nums;
}

/* O número grande de KPI: peso 800 da própria interface, tabular, para ser lido de longe. */
.ef-kpi {
  font: var(--ef-text-kpi);
  letter-spacing: var(--ef-track-kpi);
  font-variant-numeric: tabular-nums;
  color: var(--ef-ink);
}

/* Rótulo de seção: caixa alta, espaçada, no cinza de apoio. */
.ef-overline {
  font: var(--ef-text-overline);
  letter-spacing: var(--ef-track-overline);
  text-transform: uppercase;
  color: var(--ef-ink-5);
}

/* Valor indefinido NÃO é zero. custo/ha de locação sem área mostra isto,
   nunca R$ 0,00 — um zero falso é pior que um traço honesto. */
.ef-undefined {
  color: var(--ef-ink-5);
  font-family: var(--ef-font-mono);
}
.ef-undefined::before {
  content: "—";
}

/* A marca em superfície escura usa a variante branca. */
.ef-mark {
  color: var(--ef-brand);
}
.ef-mark-dark {
  color: #ffffff;
}

/* Alvo mínimo de toque no campo: uma mão, luva, sol a pino. */
@media (pointer: coarse) {
  :root {
    --ef-control-h: 52px;
  }
}