/**
 * SAR — Design Tokens canônicos
 * Fonte: brand.md + design-artifacts/A-Product-Brief/03-visual-direction.md
 * NÃO alterar valores sem RFC. Variantes por cockpit vivem em outros arquivos.
 */

:root {
  /* === Brand JCS — paleta canônica === */
  --jcs-blue: #004a99;
  --jcs-blue-hover: #003a7a;
  --jcs-blue-light: #e6eff8;

  /* === Background === */
  --bg-body: #f4f7fa;
  --bg-surface: #ffffff;
  --bg-surface-alt: #f4f7fa;

  /* === Texto === */
  --text-main: #2d3748;
  --text-muted: #718096;
  --text-on-primary: #ffffff;
  --text-disabled: #a0aec0;

  /* === Estados funcionais === */
  --green: #38a169; /* sucesso / faturado */
  --orange: #ed8936; /* alerta / em aberto */
  --red: #e53e3e; /* erro / bloqueado */
  --whatsapp-green: #25d366;

  /* === Bordas === */
  --border-subtle: #e2e8f0;
  --border-default: #cbd5e0;
  --border-strong: #a0aec0;

  /* === Radius (brand.md) === */
  --radius-sm: 6px;
  --radius-md: 12px; /* inputs, botões */
  --radius-lg: 20px; /* cards, modais */
  --radius-full: 9999px;

  /* === Sombras (brand.md) === */
  --shadow-none: 0 0 0 transparent;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow: 0 4px 25px rgba(0, 0, 0, 0.05); /* sombra canon brand.md */
  --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.08);

  /* === Spacing (preliminar, refinar Phase 6) === */
  --space-3xs: 2px;
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px; /* baseline */
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* === Tipografia === */
  --font-family-base: 'Plus Jakarta Sans Variable', 'Plus Jakarta Sans',
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
    Arial, sans-serif;
  --font-family-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo,
    Monaco, Consolas, monospace;

  /* Pesos (brand.md: 400/500/600/700/800) */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Type scale (preliminar — hierarquia brand.md + Visual DNA) */
  --text-3xs: 10px;
  --text-2xs: 11px;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-md: 14px; /* body baseline AntD */
  --text-lg: 16px;
  --text-xl: 18px;
  --text-2xl: 24px;
  --text-3xl: 32px;
  --text-4xl: 40px;

  /* Line heights */
  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* === Layout (brand.md) === */
  --layout-topbar-height: 80px;
  --layout-sidebar-width: 260px;
  --layout-sidebar-width-collapsed: 64px;
  --layout-bottom-nav-height: 64px;

  /* === Z-index === */
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;
  --z-notification: 800;

  /* === Motion (Visual DNA: 150-250ms ease-out, sem decorativo) === */
  --duration-fast: 150ms;
  --duration: 200ms;
  --duration-slow: 250ms;
  --easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-emphasize: cubic-bezier(0.2, 0, 0, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration: 0ms;
    --duration-slow: 0ms;
  }
}
