/* ds.css — Design System Angatu Sistemas (única fonte visual complementar ao Tailwind)
   Tokens canônicos em :root vêm de docs/design/MASTER.md. Nenhum hex/duration fora do MASTER.
   Toda responsividade de layout é via Tailwind sm:/md:/lg:; aqui só queries permitidas:
   prefers-reduced-motion, prefers-color-scheme, hover: hover, print. */

/* ── Fontes (mesmas do inline, para quando o HTML migrar para <link>) ── */
@font-face {
  font-family: 'Inter var';
  src: url('/fonts/inter-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Bricolage';
  src: url('/fonts/bricolage-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter fallback';
  src: local('Arial');
  ascent-override: 90%;
  descent-override: 22.43%;
  line-gap-override: 0%;
  size-adjust: 107.12%;
}

/* ── Tokens ── */
:root {
  /* Paleta medida no logotipo (sem amarelo) */
  --tinta: #0B1D33;
  --tinta-2: #12293F;
  --marinho: #01316C;
  --marinho-claro: #0A4A9E;
  --marinho-fundo: #0B2447;
  --prata: #C7D0DA;
  --prata-claro: #E3E9F0;
  --azul-claro: #9FBEE4;
  --papel: #F4F6F9;
  --branco: #FFFFFF;
  --grafite: #16233A;
  --cinza: #4A5A70;
  --linha: #DCE3EC;
  --linha-escura: rgba(199, 208, 218, .18);
  --claro-sobre-tinta: #E8EEF6;
  --cinza-sobre-tinta: #A7BBD1;
  --verde-wa: #0E7C66;

  /* CTA inverte por .escuro/.topo */
  --cta-fundo: var(--marinho);
  --cta-texto: #FFFFFF;
  --cta-sombra: rgba(1, 49, 108, .55);
  --cta-fundo-hover: #0A4A9E;

  --fonte: 'Inter var', 'Inter fallback', system-ui, -apple-system, Arial, sans-serif;
  --display: 'Bricolage', 'Inter var', 'Inter fallback', Georgia, serif;

  /* Assinatura: malha técnica + escudo (usados só em aria-current) */
  --marca-malha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 64'%3E%3Cg stroke='%239FBEE4' stroke-opacity='.18' stroke-width='1' fill='none' stroke-linecap='round'%3E%3Cpath d='M44 26h11'/%3E%3Cpath d='M0 50h9'/%3E%3Cpath d='M48 48h18'/%3E%3Cpath d='M92 46h10l6-6h14'/%3E%3Cpath d='M131 29h29'/%3E%3Cpath d='M94 19h11'/%3E%3C/g%3E%3Cg stroke='%239FBEE4' stroke-opacity='.26' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12q-5 0-5 5.5t-5 5.5q5 0 5 5.5t5 5.5'/%3E%3Cpath d='M30 12q5 0 5 5.5t5 5.5q-5 0-5 5.5t-5 5.5'/%3E%3Cpath d='M22 38l-9 9 9 9'/%3E%3Cpath d='M40 38l9 9-9 9'/%3E%3Cpath d='M36 35l-9 24'/%3E%3Crect x='105' y='13' width='21' height='21' rx='4'/%3E%3Cpath d='M111 13V8M121 13V8M111 34v5M121 34v5M105 19h-5M105 29h-5M126 19h5M126 29h5'/%3E%3Cpath d='M120 42l6 6-6 6'/%3E%3Cpath d='M130 54h9'/%3E%3C/g%3E%3Cg fill='%239FBEE4' fill-opacity='.38'%3E%3Ccircle cx='55' cy='26' r='1.4'/%3E%3Ccircle cx='66' cy='48' r='1.4'/%3E%3Ccircle cx='102' cy='46' r='1.5'/%3E%3Ccircle cx='94' cy='19' r='1.3'/%3E%3Ccircle cx='140' cy='29' r='1.4'/%3E%3Ccircle cx='9' cy='50' r='1.3'/%3E%3C/g%3E%3C/svg%3E");
  --marca-escudo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round' d='M11 1.6c3.3 1.9 6.8 2.9 9.4 3 .4 5.1-.4 9.3-2.4 12.7-1.7 3-4.2 5.4-7 6.9-2.8-1.5-5.3-3.9-7-6.9-2-3.4-2.8-7.6-2.4-12.7 2.6-.1 6.1-1.1 9.4-3z'/%3E%3Cg fill='%23000'%3E%3Ccircle cx='11' cy='9.4' r='2.2'/%3E%3Ccircle cx='7' cy='14.4' r='1.8'/%3E%3Ccircle cx='15' cy='14.4' r='1.8'/%3E%3C/g%3E%3C/svg%3E");

  --raio: 12px;
  --raio-g: 16px;
  --largura: 1120px;
  --barra: 88px;

  /* Motion (únicos permitidos) */
  --dur-fast: 150ms;
  --dur-base: 260ms;
  --dur-slow: 400ms;
  --ease-out-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);
  --stagger: 70ms;

  --shadow-ds: 0 8px 24px rgba(11, 29, 51, .08);
  --shadow-ds-lg: 0 24px 60px -18px rgba(3, 12, 26, .9);
}

/* ── Base mínima (Tailwind base já cobre reset; aqui só o que é específico da marca) ── */
:focus-visible {
  outline: 3px solid var(--marinho);
  outline-offset: 3px;
  border-radius: 4px;
}
.escuro :focus-visible { outline-color: var(--prata-claro); }

/* ── Componentes canônicos (5 estados: default/hover/active/focus/disabled) ── */
.btn-primary,
.btn--principal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 15px 30px;
  border: 0;
  border-radius: 14px;
  font: inherit;
  font-weight: 700;
  color: var(--cta-texto);
  background: var(--cta-fundo);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 10px 24px -6px var(--cta-sombra);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-in-out), background-color var(--dur-fast) var(--ease-in-out), box-shadow var(--dur-fast) var(--ease-in-out);
}
.btn-secondary,
.btn--vazado {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 15px 30px;
  border-radius: 14px;
  font: inherit;
  font-weight: 700;
  background: transparent;
  color: var(--grafite);
  border: 1.5px solid var(--linha);
  cursor: pointer;
}
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: var(--raio);
  background: transparent;
  color: var(--marinho);
  border: 0;
  cursor: pointer;
}
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  border: 1px solid var(--linha-escura);
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.card {
  background: var(--branco);
  border-radius: var(--raio);
  box-shadow: var(--shadow-ds);
  border: 1px solid var(--linha);
}
.card-pad { padding: 24px; }
.input,
.ds-input {
  width: 100%;
  min-height: 54px;
  padding: 14px 16px;
  border-radius: var(--raio);
  border: 1.5px solid var(--linha);
  background: var(--branco);
  font: inherit;
  color: var(--grafite);
}
.ds-label {
  display: block;
  font-size: .875rem;
  font-weight: 600;
  color: var(--grafite);
  margin-bottom: 6px;
}
.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: var(--papel);
  color: var(--marinho);
  border: 1px solid var(--linha);
}
.escuro .badge { background: rgba(255,255,255,.10); color: var(--azul-claro); border-color: var(--linha-escura); }
.ds-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9375rem;
}
.ds-table th, .ds-table td { padding: 12px 16px; border-bottom: 1px solid var(--linha); text-align: left; }
.ds-table th { font-weight: 600; color: var(--grafite); background: var(--papel); }
.modal-overlay {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(11, 29, 51, .55);
  backdrop-filter: blur(6px);
  z-index: 60;
}
.modal-card {
  width: min(560px, 100%);
  background: var(--branco);
  border-radius: var(--raio-g);
  box-shadow: var(--shadow-ds-lg);
  padding: 24px;
}
.skeleton {
  background: var(--prata-claro);
  border-radius: 8px;
  animation: ds-pulse 1.4s ease-in-out infinite;
}
@keyframes ds-pulse { 0%,100%{opacity:1} 50%{opacity:.55} }
.nav-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.nav-tile { display: flex; flex-direction: column; gap: 8px; padding: 20px; border-radius: var(--raio); background: var(--branco); border: 1px solid var(--linha); text-decoration: none; color: var(--grafite); }

/* ── Estados ── */
.btn-primary:hover, .btn--principal:hover { transform: translateY(-1px); }
.btn-primary:active, .btn--principal:active { transform: translateY(0); }
.btn-primary:disabled, .btn--principal:disabled { opacity: .6; cursor: progress; transform: none; }
.btn-secondary:hover, .btn--vazado:hover { border-color: var(--marinho); color: var(--marinho); }

/* Escuro inverte CTA */
.escuro, .topo { --cta-fundo: var(--branco); --cta-texto: var(--marinho); --cta-fundo-hover: var(--prata-claro); --cta-sombra: rgba(3,12,26,.70); }

/* ── Motion permitido ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (hover: hover) and (pointer: fine) {
  .card:hover { transform: translateY(-1px); }
}
/* print */
@media print {
  .topo, .barra, .gaveta, .modal-overlay { display: none !important; }
  body { padding-bottom: 0 !important; }
}