/* ===========================================================================
   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;

  --ink-900: #102A38;
  --ink-700: #344C58;
  --ink-500: #667982;

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

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

  /* 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;
}

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