/* ==========================================================================
   COOPAQ — camada de identidade visual
   Cooperativa dos Agricultores Qualificados

   Recorte do "COOPAQ Design System" (colors_and_type.css) com o que este
   sistema usa de fato. É a PRIMEIRA folha carregada em toda página: define os
   tokens e a fonte. O estilo.css/painel.css/formulario.css só consomem daqui.

   Regra ao mexer: cor nova entra como token nesta folha, nunca como hex solto
   nas outras. Se a cor não existe na paleta da marca, ela não entra.
   ========================================================================== */

/* --------------------------------------------------------------- tipografia */
/* Exo 2 é a primária do design system (substituta da "Amfibia" do manual, cujos
   arquivos entregues eram de outra fundição). Os .woff2 são SERVIDOS AQUI, não
   pelo Google Fonts: a produção é HTTP interno atrás da UDM-PRO e não há
   garantia de internet na máquina de quem abre o painel. Fonte externa falharia
   calada e a tela voltaria para a Segoe UI.
   Arquivo único por subconjunto: o Google entrega Exo 2 como fonte variável, e
   o mesmo .woff2 cobre os pesos 100–900. */
@font-face {
  font-family: 'Exo 2';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fontes/exo2-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Exo 2';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fontes/exo2-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Campo de formulário, barra de rolagem e seletor de data são desenhados pelo
     NAVEGADOR: sem esta declaração eles continuariam brancos dentro do modo
     escuro. O valor é reapontado no bloco escuro, lá embaixo. */
  color-scheme: light;

  /* ---- CORES DA MARCA (CORES_COOPAQ.pdf) ---- */
  --coopaq-cream:        #FFD895;  /* areia — superfície assinatura */
  --coopaq-brown:        #69553C;  /* terra, grão */
  --coopaq-orange:       #F58634;  /* sol, colheita */
  --coopaq-green-deep:   #008349;  /* verde primário, do logotipo */
  --coopaq-green-bright: #01B364;  /* crescimento, sucesso */

  /* ---- TONS DERIVADOS ---- */
  /* O -950 não vem do manual: é o fim da rampa verde, usado só como superfície
     lavada no modo escuro (o -900 ali ainda lê como cor cheia). */
  --green-deep-950: #01291A;
  --green-deep-900: #003F23;
  --green-deep-700: #00602F;
  --green-deep-600: #00713C;
  --green-deep-500: #008349;
  --green-deep-400: #2A9C66;
  --green-deep-200: #B7E0C9;
  --green-deep-100: #E1F2E8;
  --green-deep-50:  #F1F9F4;

  --green-bright-700: #007A45;
  --green-bright-600: #00955A;
  --green-bright-500: #01B364;
  /* -400 e -300 não vêm do manual: são o -500 clareado, para o verde continuar
     legível quando a superfície é escura (no claro ele escurece, no escuro ele
     precisa clarear — senão o botão verde some no marrom). */
  --green-bright-400: #35C57F;
  --green-bright-300: #7ADCAB;
  --green-bright-200: #B6EDD0;
  --green-bright-100: #E2F8EC;

  /* O -800 não vem do manual: é o -700 escurecido até dar 4.5:1 de contraste
     sobre o -100, para a etiqueta de prioridade média. O -300 é o par dele no
     escuro, e o -950 é a superfície lavada de laranja sobre fundo escuro. */
  --orange-950: #2E1808;
  --orange-800: #96490D;
  --orange-700: #B05710;
  --orange-600: #D86F22;
  --orange-500: #F58634;
  --orange-300: #F9B27C;
  --orange-200: #FBD3B0;
  --orange-100: #FDEADA;

  --cream-700: #C99D52;
  --cream-600: #E5B770;
  --cream-500: #FFD895;
  --cream-300: #FFE5B3;
  --cream-200: #FFEECB;
  --cream-100: #FFF6E1;
  --cream-50:  #FFFBF1;

  /* Os quatro tons abaixo do -700 são as SUPERFÍCIES DO MODO ESCURO. Nascem da
     terra da marca (#69553C) rebaixada, e não de cinza ou preto: a COOPAQ não
     tem cinza puro, e um escuro neutro ao lado do verde do logotipo lê como
     outra marca. A ordem é a mesma do claro, espelhada — o fundo é o mais
     escuro, o cartão vem acima dele, e a superfície afundada (coluna do kanban)
     fica de novo abaixo do cartão. */
  --brown-950: #14100B;
  --brown-900: #1B160F;
  --brown-850: #201A12;
  --brown-800: #262017;
  --brown-700: #3F3122;
  --brown-600: #564429;
  --brown-500: #69553C;
  --brown-400: #8E7758;
  --brown-300: #B3A088;
  --brown-200: #D6CABA;
  --brown-100: #ECE4D7;

  /* ---- NEUTROS (quentes — não há cinza puro na marca) ---- */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #FAF8F4;
  --neutral-100: #F2EEE6;
  --neutral-200: #E4DDD0;
  --neutral-300: #C9C0AF;
  --neutral-400: #9C927F;
  --neutral-500: #6E6754;
  --neutral-600: #4D4838;
  --neutral-700: #353223;
  --neutral-800: #221F14;
  --neutral-900: #15130A;

  /* ---- APELIDOS SEMÂNTICOS ---- */
  /* Quem consome cor usa DAQUI, nunca do tom cru. É o que faz o modo escuro ser
     um bloco de 40 linhas nesta folha em vez de uma varredura nas outras três:
     lá embaixo estes mesmos apelidos são reapontados, e o resto do CSS segue
     igual. Toda cor que só funciona sobre papel branco precisa ter apelido. */
  --color-primary:        var(--coopaq-green-deep);
  --color-primary-hover:  var(--green-deep-700);
  --color-primary-active: var(--green-deep-900);
  --color-primary-soft:   var(--green-deep-100);
  /* Degrau abaixo do -soft, para o estado :active do botão de contorno. */
  --color-primary-soft-forte: var(--green-deep-200);
  /* Verde ainda mais lavado: bloco do protocolo e coluna que aceita o arraste. */
  --color-primary-wash:   var(--green-deep-50);
  /* Verde como TEXTO sobre superfície (título da faixa, item marcado). No claro
     é o verde escurecido; no escuro precisa ser o clareado. */
  --color-primary-texto:  var(--green-deep-700);
  /* Texto sobre o verde cheio. Era `#fff` fixo em três folhas — no escuro o
     botão vira verde claro e o branco em cima dele cai para 2,7:1. */
  --color-on-primary:     var(--neutral-0);

  --color-accent:       var(--coopaq-green-bright);
  --color-accent-hover: var(--green-bright-600);

  --color-warm:       var(--coopaq-orange);
  --color-warm-hover: var(--orange-600);

  --color-bg:              var(--neutral-50);
  --color-bg-cream:        var(--coopaq-cream);
  --color-bg-cream-deep:   var(--cream-300);
  --color-bg-cream-soft:   var(--cream-100);
  --color-bg-cream-softer: var(--cream-50);
  --color-surface:         var(--neutral-0);
  /* Superfície AFUNDADA (coluna do kanban, etiqueta neutra, hover de item) e
     papel de seção dentro da gaveta. */
  --color-surface-2:       var(--neutral-100);
  --color-surface-3:       var(--neutral-50);

  --color-fg-1: var(--neutral-900);  /* texto principal */
  --color-fg-2: var(--neutral-700);  /* secundário */
  --color-fg-3: var(--neutral-500);  /* legendas, rótulos */
  --color-fg-on-cream: var(--coopaq-brown);

  --color-border:          var(--neutral-200);
  --color-border-strong:   var(--neutral-300);
  --color-border-on-cream: #E8C076;

  --color-scroll:       var(--neutral-300);
  --color-scroll-hover: var(--neutral-400);

  --color-success: var(--coopaq-green-bright);
  --color-warning: var(--coopaq-orange);
  /* Laranja como TEXTO (data implausível do histórico): o -500 sobre papel
     branco não passa, o -300 sobre marrom escuro sim. */
  --color-warning-fg: var(--orange-700);
  --color-danger:  #C2371A;
  /* Mesma família, escurecida: -700 para texto sobre o fundo lavado e para o
     hover do botão de perigo; -900 para o fim da rampa (acidente). Os -400,
     -300 e -200 são os espelhos claros dos três, para o modo escuro, e o -950
     é a superfície lavada de vermelho sobre fundo escuro. */
  --color-danger-950:  #331410;
  --color-danger-700:  #A32E15;
  --color-danger-900:  #8A2412;
  --color-danger-400:  #E8654A;
  --color-danger-300:  #F5A08D;
  --color-danger-200:  #F7BFB2;
  --color-danger-soft: #FBDDD4;
  --color-info:    #2D6A8A;
  --color-info-400: #5FA3C4;

  /* Véu de vermelho das colunas de ramificação. É o valor que o color-mix do
     painel.css produz, escrito à mão para o navegador que não tem color-mix. */
  --color-ramificacao: #F7EAE6;

  /* ---- TIPOGRAFIA ---- */
  --font-sans: 'Exo 2', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'JetBrains Mono', Consolas, Menlo, monospace;

  --tracking-tight: -0.01em;
  --tracking-wider: 0.06em;  /* rótulos em caixa alta */

  /* ---- RAIOS ---- */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   18px;
  --radius-pill: 999px;

  /* ---- ELEVAÇÃO (sombra quente, nunca preto puro) ---- */
  --shadow-xs: 0 1px 2px rgba(105, 85, 60, 0.08);
  --shadow-sm: 0 2px 4px rgba(105, 85, 60, 0.10), 0 1px 2px rgba(105, 85, 60, 0.06);
  --shadow-md: 0 6px 14px rgba(105, 85, 60, 0.12), 0 2px 4px rgba(105, 85, 60, 0.06);
  --shadow-lg: 0 16px 32px rgba(105, 85, 60, 0.14), 0 4px 8px rgba(105, 85, 60, 0.08);
  --shadow-xl: 0 28px 56px rgba(105, 85, 60, 0.18), 0 8px 16px rgba(105, 85, 60, 0.10);
  --ring-focus: 0 0 0 3px rgba(0, 131, 73, 0.30);
  --ring-erro:  0 0 0 3px rgba(194, 55, 26, 0.22);

  /* ---- MOVIMENTO (contido: sem salto, sem mola) ---- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;

  /* ======================================================================
     CORES DE FASE (enum de status do fluxo)
     Uma cor por família da marca, para que as dez fases continuem separadas
     depois de lavadas em fundo de chip:
       areia → laranja → verde claro → marrom → verde COOPAQ → marrom escuro
       → verde profundo, e fora da rampa os vermelhos das ramificações.
     Os dois checklists são o par marrom de propósito (retirada clara, retorno
     escura): é a mesma tarefa nas duas pontas da viagem, e a terra é a cor do
     trabalho de campo na paleta da cooperativa.
     ====================================================================== */
  --fase-recebida:           var(--cream-700);
  --fase-em_analise:         var(--orange-500);
  --fase-aprovada:           var(--green-bright-500);
  --fase-checklist_retirada: var(--brown-400);
  --fase-em_rota:            var(--green-deep-500);
  --fase-checklist_retorno:  var(--brown-600);
  --fase-concluida:          var(--green-deep-900);
  --fase-recusada:           var(--color-danger);
  --fase-veiculo_avariado:   var(--orange-700);
  --fase-acidente:           var(--color-danger-900);

  /* A cor da fase nunca é usada crua: ela é MISTURADA para virar etiqueta cheia,
     fundo de chip e texto de chip. Os três tokens abaixo são o outro lado dessa
     mistura, e é por eles que a rampa inteira atravessa para o modo escuro:
     no claro a fase é escurecida contra o quase-preto e recebe texto branco; no
     escuro ela é clareada contra o branco e recebe texto quase-preto. */
  --fase-mistura:      var(--neutral-900);
  --fase-contra-texto: var(--neutral-0);
  --fase-fundo-neutro: var(--neutral-700);  /* sem color-mix no navegador */

  /* ---- CORES DE PRIORIDADE ---- */
  /* Rampa de urgência de três degraus. O azul-informação da "baixa" é o único
     ponto frio do sistema, e é proposital: separa "pode esperar" dos verdes de
     fase, que estão no mesmo cartão.
     A BORDA usa o tom cheio (é traço, não texto) e o TEXTO usa o tom escurecido:
     na pílula de 10px, o -500/-700 sobre o -100 fica em 4.25:1 e reprova. */
  --prioridade-alta-borda:  var(--color-danger);
  --prioridade-alta-fundo:  var(--color-danger-soft);
  --prioridade-alta-texto:  var(--color-danger-700);
  --prioridade-media-borda: var(--orange-500);
  --prioridade-media-fundo: var(--orange-100);
  --prioridade-media-texto: var(--orange-800);
  --prioridade-baixa-borda: var(--color-info);
  --prioridade-baixa-fundo: var(--green-deep-100);
  --prioridade-baixa-texto: var(--green-deep-700);
}

/* ==========================================================================
   PONTE COM O CÓDIGO ANTERIOR
   Nomes usados antes do redesign, agora apontando para a paleta da marca.
   Existem para que nenhuma regra antiga fique sem cor enquanto o CSS migra.
   Em código novo, use os tokens acima.
   ========================================================================== */
:root {
  --verde:        var(--color-primary);
  --verde-escuro: var(--color-primary-hover);
  --tinta:        var(--color-fg-1);
  --cinza:        var(--color-fg-3);
  --borda:        var(--color-border);
  --fundo:        var(--color-bg);
  --erro:         var(--color-danger);
}

/* ==========================================================================
   MODO ESCURO
   Só apelidos semânticos são reapontados — a paleta da marca acima não muda.
   Quem consome cor pelo apelido atravessa sozinho; o que ainda usasse tom cru
   foi apelidado antes deste bloco existir.

   O escuro é MARROM, não preto: a terra #69553C rebaixada (--brown-950..800).
   Cinza puro não existe na marca, e um fundo neutro ao lado do verde do
   logotipo lê como outra empresa.

   As inversões que valem registro:
   - o verde ESCURECE no claro e CLAREIA no escuro (hover/active invertem);
   - `--color-on-primary` deixa de ser branco: o verde claro pede tinta escura;
   - `--fase-mistura` vira branco, e com isso as dez fases, as etiquetas e os
     chips atravessam sem uma linha nova nas outras folhas;
   - prioridade ALTA não aparece aqui de propósito: ela é feita de
     `--color-danger*`, que já foram reapontados logo acima dela.

   O bloco aparece DUAS VEZES: uma para a escolha explícita e outra dentro do
   `prefers-color-scheme` para quem nunca escolheu (o tema.js grava `auto`, e
   antes de o script rodar não há atributo nenhum). CSS não tem como aliasar uma
   lista de custom properties condicionalmente sem repetir o seletor — as duas
   cópias precisam ser idênticas, e há teste que reprova se divergirem.
   ========================================================================== */
:root[data-tema="escuro"] {
  color-scheme: dark;

  --color-bg:              var(--brown-950);
  --color-bg-cream:        var(--brown-800);
  --color-bg-cream-deep:   var(--brown-900);
  --color-bg-cream-soft:   var(--brown-900);
  --color-bg-cream-softer: var(--brown-950);
  --color-surface:         var(--brown-800);
  --color-surface-2:       var(--brown-900);
  --color-surface-3:       var(--brown-850);

  --color-fg-1: var(--neutral-100);
  --color-fg-2: var(--neutral-200);
  --color-fg-3: var(--neutral-300);
  --color-fg-on-cream: var(--cream-200);

  --color-border:          var(--brown-700);
  --color-border-strong:   var(--brown-600);
  --color-border-on-cream: var(--brown-600);

  --color-primary:            var(--green-bright-500);
  --color-primary-hover:      var(--green-bright-300);
  --color-primary-active:     var(--green-bright-200);
  --color-primary-soft:       var(--green-deep-900);
  --color-primary-soft-forte: var(--green-deep-700);
  --color-primary-wash:       var(--green-deep-950);
  --color-primary-texto:      var(--green-bright-300);
  --color-on-primary:         var(--neutral-900);

  --color-accent:       var(--green-bright-400);
  --color-accent-hover: var(--green-bright-300);

  --color-scroll:       var(--brown-600);
  --color-scroll-hover: var(--brown-500);

  --color-success:    var(--green-bright-400);
  --color-warning-fg: var(--orange-300);
  --color-info:       var(--color-info-400);

  --color-danger:      var(--color-danger-400);
  --color-danger-700:  var(--color-danger-300);
  --color-danger-900:  var(--color-danger-200);
  --color-danger-soft: var(--color-danger-950);
  --color-ramificacao: #2B1D18;

  --fase-mistura:      var(--neutral-0);
  --fase-contra-texto: var(--neutral-900);
  --fase-fundo-neutro: var(--neutral-300);

  /* Sombra quente some sobre marrom escuro: no escuro ela vira preto com mais
     alfa, que é o que ainda separa o cartão do fundo. */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.46), 0 1px 2px rgba(0, 0, 0, 0.32);
  --shadow-md: 0 6px 14px rgba(0, 0, 0, 0.50), 0 2px 4px rgba(0, 0, 0, 0.32);
  --shadow-lg: 0 16px 32px rgba(0, 0, 0, 0.55), 0 4px 8px rgba(0, 0, 0, 0.35);
  --shadow-xl: 0 28px 56px rgba(0, 0, 0, 0.62), 0 8px 16px rgba(0, 0, 0, 0.40);
  --ring-focus: 0 0 0 3px rgba(1, 179, 100, 0.38);
  --ring-erro:  0 0 0 3px rgba(232, 101, 74, 0.30);

  /* A rampa das dez fases espelhada: quem era o tom mais escuro da família vira
     o mais claro. A relação entre elas é preservada — os dois checklists
     continuam sendo o par marrom (retirada clara, retorno escura), e as
     ramificações continuam nos vermelhos. */
  --fase-recebida:           var(--cream-500);
  --fase-em_analise:         var(--orange-500);
  --fase-aprovada:           var(--green-bright-400);
  --fase-checklist_retirada: var(--brown-200);
  --fase-em_rota:            var(--green-deep-400);
  --fase-checklist_retorno:  var(--brown-300);
  --fase-concluida:          var(--green-deep-200);
  --fase-recusada:           var(--color-danger-400);
  --fase-veiculo_avariado:   var(--orange-300);
  --fase-acidente:           var(--color-danger-200);

  --prioridade-media-fundo: var(--orange-950);
  --prioridade-media-texto: var(--orange-200);
  --prioridade-baixa-fundo: var(--green-deep-950);
  --prioridade-baixa-texto: var(--green-bright-200);
}

/* Modo "auto": vale quando a pessoa nunca escolheu (o tema.js grava `auto`) e
   também quando o script não chegou a rodar (nenhum atributo). A escolha
   explícita — `claro` ou `escuro` — não cai aqui e continua mandando. */
@media (prefers-color-scheme: dark) {
  :root[data-tema="auto"],
  :root:not([data-tema]) {
    color-scheme: dark;

    --color-bg:              var(--brown-950);
    --color-bg-cream:        var(--brown-800);
    --color-bg-cream-deep:   var(--brown-900);
    --color-bg-cream-soft:   var(--brown-900);
    --color-bg-cream-softer: var(--brown-950);
    --color-surface:         var(--brown-800);
    --color-surface-2:       var(--brown-900);
    --color-surface-3:       var(--brown-850);

    --color-fg-1: var(--neutral-100);
    --color-fg-2: var(--neutral-200);
    --color-fg-3: var(--neutral-300);
    --color-fg-on-cream: var(--cream-200);

    --color-border:          var(--brown-700);
    --color-border-strong:   var(--brown-600);
    --color-border-on-cream: var(--brown-600);

    --color-primary:            var(--green-bright-500);
    --color-primary-hover:      var(--green-bright-300);
    --color-primary-active:     var(--green-bright-200);
    --color-primary-soft:       var(--green-deep-900);
    --color-primary-soft-forte: var(--green-deep-700);
    --color-primary-wash:       var(--green-deep-950);
    --color-primary-texto:      var(--green-bright-300);
    --color-on-primary:         var(--neutral-900);

    --color-accent:       var(--green-bright-400);
    --color-accent-hover: var(--green-bright-300);

    --color-scroll:       var(--brown-600);
    --color-scroll-hover: var(--brown-500);

    --color-success:    var(--green-bright-400);
    --color-warning-fg: var(--orange-300);
    --color-info:       var(--color-info-400);

    --color-danger:      var(--color-danger-400);
    --color-danger-700:  var(--color-danger-300);
    --color-danger-900:  var(--color-danger-200);
    --color-danger-soft: var(--color-danger-950);
    --color-ramificacao: #2B1D18;

    --fase-mistura:      var(--neutral-0);
    --fase-contra-texto: var(--neutral-900);
    --fase-fundo-neutro: var(--neutral-300);

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.46), 0 1px 2px rgba(0, 0, 0, 0.32);
    --shadow-md: 0 6px 14px rgba(0, 0, 0, 0.50), 0 2px 4px rgba(0, 0, 0, 0.32);
    --shadow-lg: 0 16px 32px rgba(0, 0, 0, 0.55), 0 4px 8px rgba(0, 0, 0, 0.35);
    --shadow-xl: 0 28px 56px rgba(0, 0, 0, 0.62), 0 8px 16px rgba(0, 0, 0, 0.40);
    --ring-focus: 0 0 0 3px rgba(1, 179, 100, 0.38);
    --ring-erro:  0 0 0 3px rgba(232, 101, 74, 0.30);

    --fase-recebida:           var(--cream-500);
    --fase-em_analise:         var(--orange-500);
    --fase-aprovada:           var(--green-bright-400);
    --fase-checklist_retirada: var(--brown-200);
    --fase-em_rota:            var(--green-deep-400);
    --fase-checklist_retorno:  var(--brown-300);
    --fase-concluida:          var(--green-deep-200);
    --fase-recusada:           var(--color-danger-400);
    --fase-veiculo_avariado:   var(--orange-300);
    --fase-acidente:           var(--color-danger-200);

    --prioridade-media-fundo: var(--orange-950);
    --prioridade-media-texto: var(--orange-200);
    --prioridade-baixa-fundo: var(--green-deep-950);
    --prioridade-baixa-texto: var(--green-bright-200);
  }
}