/*
  tokens.css — tokens ESTRUTURAIS (não mudam entre temas).
  Cores e sombras ficam nos arquivos de tema (src/theme/themes/*.css),
  que definem as MESMAS variáveis com valores diferentes.
  Fonte: docs/ui-crm/01-design-system.md
*/
:root {
  /* tipografia */
  --font-family: "Inter", "Segoe UI", sans-serif;
  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-md: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 32px;

  /* espaçamento */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* raios — confirmados no mockup real */
  --radius-shell: 20px;
  --radius-card: 14px;
  --radius-control: 9px;

  /* medidas confirmadas */
  --sidebar-width: 190px;
  --column-perfis-width: 220px;
  --control-height-sm: 32px;
  --control-height-md: 40px;

  /* sombra confirmada */
  --shadow-shell: 0 20px 52px rgba(3, 40, 54, 0.16);
  --shadow-card: 0 1px 2px rgba(3, 40, 54, 0.06), 0 1px 1px rgba(3, 40, 54, 0.04);

  /* breakpoints (uso em JS via matchMedia; aqui só documentado) */
  --breakpoint-compact: 900px; /* confirmado no mockup */
  --breakpoint-mobile: 640px;  /* adicional, ainda aproximado */

  /* z-index */
  --z-sidebar-mobile: 100;
  --z-modal: 200;
  --z-toast: 300;

  --disabled-opacity: 0.5;
}

/* foco visível — obrigatório em todo elemento interativo (01-design-system.md) */
:focus-visible {
  outline: 2px solid var(--brand-cyan);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}