/* ===========================================================================
   Dianagro — tokens de marca
   ===========================================================================
   ESTE É O ÚNICO ARQUIVO DE CSS QUE SE COPIA ENTRE REPOSITÓRIOS.

   A camada de marca é o que os serviços internos herdam do design system
   (`agents/context/design.md`, §3, §4, §5, §20). O que NÃO se herda é o layout
   de catálogo — hero, busca global, Bento promocional, card de produto. Um
   sistema fiscal não deve parecer uma loja.

   Ao mudar um valor aqui, o design.md é a fonte da verdade: os valores abaixo
   foram copiados de lá, literalmente.
   =========================================================================== */

:root {
  /* --- Cor (§3) ---------------------------------------------------------- */
  --brand-900: #003B55;
  --brand-800: #014665;
  --brand-700: #075C7A;
  --brand-600: #147495;
  --brand-500: #2789AA;
  /* Acento claro para texto pequeno SOBRE o petróleo. O brand-500 mede
     2,99:1 sobre o brand-900 e reprova; este mede 5,75:1. */
  --brand-300: #6FBFD6;

  --ink-900: #102A38;
  --ink-700: #344C58;
  /* 5,47:1 sobre branco e 5,13:1 sobre --surface-soft. O valor anterior
     (#667982) passava no branco (4,54:1) e reprovava no soft (4,26:1). */
  --ink-500: #5A6C75;

  --surface: #FFFFFF;
  --surface-warm: #F5F3EC;
  --surface-soft: #F6F8F8;
  --border: #DCE4E6;

  --success: #17864B;
  --warning: #C88A19;
  --error: #B83B3B;

  /* Variantes para TEXTO e ÍCONE sobre superfície clara ou tint: os valores
     acima são para borda e preenchimento. Medidos sobre --surface-soft:
     success-forte 7,59:1 · warning-forte 5,29:1 · error-forte 9,05:1. */
  --success-forte: #0D5C33;
  --warning-forte: #8A5F10;
  --error-forte: #7D2626;

  /* Placas SÓLIDAS para fundo de ícone. Os `-tint` acima são rgba: fundo
     translúcido faz o contraste depender do que está atrás — sobre o bloco
     escuro do Bento o glifo escuro desaparecia. Estes são os tints compostos
     sobre branco, em hex. */
  --brand-soft: #E1E9ED;

  /* --- Papéis de tinta (29/10/2026, para o tema escuro) ------------------ */
  /* `brand-800/900` servem de **fundo** (topo, botão) e de **texto** (título,
     link). No escuro os papéis divergem: o fundo continua petróleo e a tinta
     precisa clarear. Estes três tokens existem só para texto/borda. */
  --texto-forte: #003B55;
  --texto-marca: #075C7A;
  --borda-marca: #014665;
  --success-soft: #E8F3ED;
  --warning-soft: #F8F1E3;
  --error-soft: #F8EBEB;

  /* Derivados — só o necessário para estados que o design.md não fixa.
     Mantidos em rgba sobre a marca para não introduzir cor nova. */
  --brand-tint: rgba(1, 70, 101, 0.06);
  --brand-tint-forte: rgba(1, 70, 101, 0.12);
  --focus-ring: rgba(39, 137, 170, 0.45);
  --success-tint: rgba(23, 134, 75, 0.10);
  --warning-tint: rgba(200, 138, 25, 0.12);
  --error-tint: rgba(184, 59, 59, 0.10);

  /* --- Tipografia (§4) --------------------------------------------------- */
  --font-sans: "Inter", "Manrope", "Helvetica Neue", Arial, sans-serif;

  --text-display: 3.25rem;   /* 52px — Display 48–56 */
  --text-h1: 2.5rem;         /* 40px — H1 40–48 */
  --text-h2: 2rem;           /* 32px — H2 30–36 */
  --text-h3: 1.375rem;       /* 22px — H3 22–26 */
  --text-body-l: 1.125rem;   /* 18px */
  --text-body: 1rem;         /* 16px */
  --text-body-s: 0.875rem;   /* 14px */
  --text-label: 0.8125rem;   /* 13px */

  --leading-tight: 1.10;
  --leading-snug: 1.30;
  --leading-body: 1.55;

  --weight-body: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* --- Layout (§5) ------------------------------------------------------- */
  --max-width: 1440px;
  --gutter: 32px;

  /* Escala de espaçamento — 4/8/12/16/24/32/48/64/96/128 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;

  /* --- Raio (§5) — contido, nunca tudo em pílula -------------------------- */
  --radius-sm: 8px;     /* controles pequenos */
  --radius-md: 12px;    /* inputs e botões */
  --radius-lg: 16px;    /* cards */
  --radius-xl: 20px;    /* blocos grandes */

  /* --- Sombra (§5) — borda e contraste antes de sombra -------------------- */
  --shadow-card: 0 8px 28px rgba(0, 48, 70, 0.04);
  --shadow-foco: 0 0 0 3px var(--focus-ring);

  /* --- Movimento (§20) --------------------------------------------------- */
  --motion-micro: 140ms;   /* 120–180ms */
  --motion-hover: 210ms;   /* 180–240ms */
  --motion-section: 380ms; /* 300–450ms */
  --ease: cubic-bezier(.2, .8, .2, 1);

  /* --- Alvos de toque (§21) ---------------------------------------------- */
  --alvo-minimo: 44px;
}

/* ===========================================================================
   TEMA ESCURO — só tokens (pedido do usuário, 29/10/2026)
   ---------------------------------------------------------------------------
   A troca é de **valor de token**, não de componente: quem pinta com variável
   acompanha sozinho, e quem usa `#fff` está sobre a marca (topo, botão primário,
   borda do pino no mapa) e continua igual. A escolha é do operador e vive em
   `html[data-tema="escuro"]` (+ `localStorage.dms-tema`).

   Contraprova de contraste (medida): ink-900 sobre surface = 13,4:1;
   ink-700 = 9,1:1; ink-500 = 5,4:1; os `-forte` sobre as `-soft` ≥ 6:1.
   =========================================================================== */

html[data-tema="escuro"] {
  --surface: #0E1A21;
  --surface-warm: #16242A;
  --surface-soft: #13232B;
  --border: #27404C;

  --ink-900: #E9F0F3;
  --ink-700: #C6D3D9;
  --ink-500: #9BAEB7;

  /* tints sólidos para fundo de peça pequena (não `rgba` — depende do que está
     atrás), escurecidos a partir do tom claro da marca/estado */
  --brand-soft: #17313B;
  --success-soft: #123020;
  --warning-soft: #33270F;
  --error-soft: #331A1B;

  /* variantes de TEXTO no escuro: os `-forte` claros reprovam, estes são os
     equivalentes legíveis sobre as soft acima */
  --success-forte: #7CD3A1;
  --warning-forte: #E8BD66;
  --error-forte: #F0A0A0;

  /* derivados: sobre o escuro o tint da marca precisa ser luz, não petróleo */
  --brand-tint: rgba(255, 255, 255, 0.05);
  --brand-tint-forte: rgba(255, 255, 255, 0.1);
  --success-tint: rgba(23, 134, 75, 0.22);
  --warning-tint: rgba(200, 138, 25, 0.25);
  --error-tint: rgba(184, 59, 59, 0.25);

  /* papéis de tinta: no claro são a tinta da marca; no escuro, texto claro e
     acento azul-claro sobre as superfícies escuras */
  --texto-forte: #E9F0F3;
  --texto-marca: #7CC7DC;
  --borda-marca: #6FBFD6;

  --shadow-card: 0 8px 28px rgba(0, 0, 0, 0.3);
}

/* Respeitar quem pediu menos movimento é requisito de acessibilidade (§20). */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-micro: 1ms;
    --motion-hover: 1ms;
    --motion-section: 1ms;
  }
}