@font-face {
  font-family: Poppins;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/poppins-400.woff2") format("woff2");
}
@font-face {
  font-family: Poppins;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/fonts/poppins-500.woff2") format("woff2");
}
@font-face {
  font-family: Poppins;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/fonts/poppins-600.woff2") format("woff2");
}
@font-face {
  font-family: Poppins;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/fonts/poppins-700.woff2") format("woff2");
}
/* Fundação dos três produtos. Contrato e evidências: docs/ui-premium/CONTRACT.md
   (substitui a direção de docs/ui-refactor/, preservando seus invariantes).
   Cores e suas expressões são preservadas; proporções são editoriais. */
:root {
  /* Paleta — as 5 cores aprovadas, nada mais. */
  --brand-blue: #0F2A44;
  --brand-orange: #F5A623;
  --brand-beige: #D9C09A;
  --brand-gray-100: #ECECEC;
  --brand-white: #FFFFFF;

  /* Derivadas da paleta, para nao precisar de rgba() cru nos produtos. */
  --ink-muted: color-mix(in srgb, var(--brand-blue) 72%, var(--brand-white));
  --border-subtle: var(--brand-gray-100);
  --surface-raised: color-mix(in srgb, var(--brand-gray-100) 45%, var(--brand-white));

  /* Mais derivadas da mesma paleta — nenhum matiz novo. Existem para dar
     hierarquia de plano e de texto sem recorrer a rgba() cru nos produtos. */
  --ink-soft: color-mix(in srgb, var(--brand-blue) 52%, var(--brand-white));
  --border-strong: color-mix(in srgb, var(--brand-blue) 18%, var(--brand-white));
  --surface-sunken: color-mix(in srgb, var(--brand-gray-100) 70%, var(--brand-white));
  --surface-warm: color-mix(in srgb, var(--brand-beige) 26%, var(--brand-white));
  --surface-deep: var(--brand-blue);
  --accent-soft: color-mix(in srgb, var(--brand-orange) 20%, var(--brand-white));

  /* Profundidade: três níveis, todos derivados do azul da marca com
     transparência. Separam planos sem virar moldura pesada nem novo tom. */
  --shadow-1: 0 1px 2px color-mix(in srgb, var(--brand-blue) 8%, transparent);
  --shadow-2:
    0 2px 4px color-mix(in srgb, var(--brand-blue) 6%, transparent),
    0 8px 20px -6px color-mix(in srgb, var(--brand-blue) 12%, transparent);
  --shadow-3:
    0 4px 8px color-mix(in srgb, var(--brand-blue) 8%, transparent),
    0 24px 48px -12px color-mix(in srgb, var(--brand-blue) 22%, transparent);

  /* Tipografia */
  --font-sans: Poppins, system-ui, -apple-system, "Segoe UI", sans-serif;
  --text-base: 16px;
  --leading-base: 1.5;
  --text-sm: 0.875rem;
  --text-xs: 0.75rem;
  --tracking-tight: -0.035em;
  --tracking-tighter: -0.045em;
  --tracking-wide: 0.13em;

  /* Formas por função: campo, painel e ação. */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* Raios por papel — o raio cresce com a superfície, nunca o contrário.
     Badge < campo < controle < card < mídia. Aninhados conversam. */
  --radius-badge: 8px;
  --radius-field: 10px;
  --radius-control: 12px;
  --radius-card: 20px;
  --radius-media: 28px;

  /* Movimento: um vocabulário, quatro durações. Ver motion-interactions. */
  --dur-press: 120ms;
  --dur-state: 180ms;
  --dur-overlay: 220ms;
  --dur-enter: 420ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --ease-editorial: cubic-bezier(0.16, 1, 0.3, 1);

  /* Entrada editorial (o que o IntersectionObserver dispara). Separado das
     durações de estado acima porque é outra intenção: estado responde ao
     dedo em 120–220ms; entrada narra, e precisa ser vista. */
  --dur-reveal: 460ms;        /* grupo de seção — faixa 350–500 */
  --dur-words: 760ms;         /* título por palavras — faixa 550–850 */
  --stagger: 90ms;            /* entre itens de um grupo */
  --stagger-word: 55ms;       /* entre palavras de um título */

  /* Controles: altura minima de alvo de toque e respiro interno. */
  --control-min-height: 44px;
  --control-padding-y: 0.7rem;
  --control-padding-x: 1.1rem;
  --control-transition: background-color 150ms ease, border-color 150ms ease;

  /* Foco visivel: azul, 3px, deslocado 3px. Vale para os 3 produtos. */
  --focus-width: 3px;
  --focus-offset: 3px;
  --focus-color: var(--brand-blue);

  /* Espacamento */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 5rem;

  --space-11: 6rem;

  --page-gutter: 16px;
  --container-max: 1440px;
  --container-editorial: 1280px;
  --measure: 848px;
  --measure-narrow: 62ch;
  --section-space: 48px;

  /* Escala tipográfica fluida. Os extremos são os alvos reais de mobile e
     desktop amplo; o meio interpola sem salto. */
  --text-display: clamp(2.125rem, 1.15rem + 4.3vw, 5rem);     /* 34 → 80 */
  --text-title: clamp(1.625rem, 1.15rem + 2.1vw, 2.75rem);    /* 26 → 44 */
  --text-heading: clamp(1.5rem, 2.5vw, 2.5rem);
  --text-section: clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem);  /* 22 → 30 */
  --text-op-title: clamp(1.5rem, 1.2rem + 1vw, 2rem);         /* 24 → 32 */
  --text-lead: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);      /* 17 → 20 */
  --text-operational: 14px;
  --text-caption: 0.75rem;

  --leading-tight: 1.08;
  --leading-title: 1.18;
  --leading-body: 1.55;

  /* Duas densidades, uma família. Cada superfície escolhe a sua. */
  --density-section: var(--section-space);
  --density-panel: var(--space-5);
}

/* Densidade editorial: público de Portfólio, marketing do Estoque, landing
   do Financeiro. Respiro maior, medida de leitura protegida. */
body[data-density="editorial"] {
  --density-section: clamp(2.5rem, 1rem + 6vw, 7rem);
  --density-panel: var(--space-6);
}

/* Densidade operacional: lojista, admins, cliente e operador. Espaço a
   serviço da tarefa — sem hero, sem seção de 112px entre dois filtros. */
body[data-density="operational"] {
  --density-section: var(--space-6);
  --density-panel: var(--space-5);
  --text-lead: 0.9375rem;
}

@media (min-width: 768px) {
  :root { --page-gutter: 32px; --section-space: 64px; }
}
@media (min-width: 1280px) {
  :root { --page-gutter: 40px; --section-space: 72px; }
}
@media (min-width: 1425px) {
  :root { --page-gutter: 80px; --section-space: 80px; }
}