/* ==========================================================================
   Portal X — tokens de UI compartilhados (fonte única)
   Todo módulo deriva cor/medida daqui. Cores seguem o branding da empresa
   (--brand-primary / --brand-accent, injetados no head.ejs).
   ========================================================================== */
:root {
  /* Marca */
  --ui-navy: var(--brand-primary, #0f2f5c);
  --ui-navy-deep: color-mix(in srgb, var(--ui-navy) 78%, #000);
  --ui-accent: var(--brand-accent, #1353d8);

  /* Texto */
  --ui-ink: var(--ui-navy);
  --ui-ink-2: #3a4a73;
  --ui-ink-3: #5f6c8a;
  --ui-ink-4: #9ba4ba;

  /* Superfícies e linhas */
  --ui-surface: #ffffff;
  --ui-surface-2: #fbfcff;
  --ui-surface-3: #f4f6fb;
  --ui-line: color-mix(in srgb, var(--ui-navy) 8%, transparent);
  --ui-line-2: color-mix(in srgb, var(--ui-navy) 14%, transparent);
  --ui-line-hover: color-mix(in srgb, var(--ui-navy) 30%, transparent);
  --ui-tint: color-mix(in srgb, var(--ui-navy) 5%, transparent);
  --ui-tint-2: color-mix(in srgb, var(--ui-navy) 9%, transparent);

  /* Semânticas */
  --ui-ok: #137a50;   --ui-ok-bg: #e7f7ee;   --ui-ok-line: rgba(19, 122, 80, 0.22);
  --ui-warn: #9a5b00; --ui-warn-bg: #fff4d8; --ui-warn-line: rgba(154, 91, 0, 0.22);
  --ui-bad: #b42633;  --ui-bad-bg: #ffe8ea;  --ui-bad-line: rgba(180, 38, 51, 0.22);
  --ui-info: var(--ui-accent);
  --ui-info-bg: color-mix(in srgb, var(--ui-accent) 9%, #fff);

  /* Controles (campo, select, data, botão) */
  --ui-ctl-h: 38px;
  --ui-ctl-h-sm: 32px;
  --ui-ctl-r: 9px;
  --ui-ctl-px: 11px;
  --ui-ctl-fs: 0.84rem;      /* ~13.5px */
  --ui-label-fs: 0.75rem;    /* 12px */
  --ui-focus-ring: 0 0 0 3px color-mix(in srgb, var(--ui-accent) 28%, transparent);

  /* Cartões / movimento */
  --ui-radius: 14px;
  --ui-radius-sm: 10px;
  --ui-shadow: 0 1px 2px rgba(14, 31, 77, 0.04), 0 6px 18px rgba(14, 31, 77, 0.04);
  --ui-shadow-pop: 0 12px 32px rgba(14, 31, 77, 0.16), 0 2px 6px rgba(14, 31, 77, 0.08);
  --ui-ease: cubic-bezier(.2, .7, .2, 1);
}

/* Toque: alvo mínimo de 44px e 16px de fonte (evita zoom no iOS) */
@media (pointer: coarse) {
  :root {
    --ui-ctl-h: 44px;
    --ui-ctl-h-sm: 38px;
    --ui-ctl-fs: 1rem;
  }
}