/* HubFy — design tokens (base para todo o app) */
:root {
  /* Marca */
  --hf-yellow: #FFE01B;
  --hf-yellow-strong: #F5D000;
  --hf-yellow-soft: #FFF6BF;
  --hf-yellow-tint: #FFFBE6;
  --hf-blue: #0050DD;
  --hf-blue-hover: #0044BF;
  --hf-blue-dark: #0B3AA8;
  --hf-blue-soft: #E8F0FE;
  --hf-navy: #0F1B3D;

  /* Neutros */
  --hf-white: #FFFFFF;
  --hf-bg: #F5F8FB;
  --hf-gray-50: #F8FAFC;
  --hf-gray-100: #EEF2F7;
  --hf-gray-200: #E2E8F0;
  --hf-gray-300: #CBD5E1;
  --hf-gray-500: #626D80;
  --hf-gray-700: #334155;

  /* Estados */
  --hf-success: #16A34A;
  --hf-success-soft: #E7F7EC;
  --hf-danger: #DC2626;
  --hf-danger-soft: #FDECEC;
  --hf-warning: #F59E0B;
  --hf-warning-soft: #FDF3D3;
  --hf-orange: #F59A0B;
  --hf-orange-soft: #FFF4E0;
  --hf-green: #12B25A;
  --hf-green-soft: #E6F8EE;
  --hf-info-soft: #E3F1FE;

  /* Tipografia */
  --hf-font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --hf-text: var(--hf-navy);
  --hf-text-muted: var(--hf-gray-500);

  /* Forma */
  --hf-radius-sm: 8px;
  --hf-radius: 12px;
  --hf-radius-lg: 18px;
  --hf-radius-pill: 999px;

  /* Sombras */
  --hf-shadow-sm: 0 1px 2px rgba(15, 27, 61, .06);
  --hf-shadow: 0 4px 16px rgba(15, 27, 61, .07);
  --hf-shadow-lg: 0 18px 48px rgba(15, 27, 61, .12);
  --hf-focus: 0 0 0 4px rgba(0, 80, 221, .18);

  /* Movimento */
  --hf-ease: cubic-bezier(.2, .7, .2, 1);
  --hf-fast: 150ms;
  --hf-mid: 260ms;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; }

body {
  font-family: var(--hf-font);
  color: var(--hf-text);
  background: var(--hf-bg);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

button, input { font: inherit; color: inherit; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}

/* Tela de carregamento enquanto a sessão (Supabase) é verificada: evita o "pisca" entre login e app */
.auth-loading {
  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: var(--hf-bg);
  transition: opacity 220ms ease, visibility 220ms;
}
.auth-loading.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.auth-loading img { width: 56px; height: 56px; object-fit: contain; clip-path: inset(0 7.5% 0 0); }
.auth-loading__spin { width: 26px; height: 26px; border: 3px solid var(--hf-gray-200); border-top-color: var(--hf-blue); border-radius: 50%; animation: auth-spin .8s linear infinite; }
@keyframes auth-spin { to { transform: rotate(360deg); } }
.auth-loading__msg { margin: 0; max-width: 320px; padding: 0 16px; text-align: center; color: var(--hf-text-muted); font-size: 15px; }