/* ─────────────────────────────────────────────
   Xcene Design System — Variáveis Globais
   Compartilhado entre index, painel, admin, faq
   ───────────────────────────────────────────── */
:root {
  /* Cores — Brand */
  --navy: #161D35;
  --navy-dark: #0D1220;
  --navy-mid: #202E59;
  --blue: #1C70BB;
  --blue-light: #2B8FE0;
  --blue-accent: #47B8FF;
  --primary: #1238F1;

  /* F11.1: Cores semânticas adicionais */
  --footer-bg: #0D1220;
  --led-active: #2A8FE5;
  --card-dark: #1a2744;

  /* F11.6: Cor única para icon strokes */
  --icon-color: #47B8FF;

  /* Cores — Neutras */
  --dark: #1E272F;
  --gray: #8A919A;
  --gray-light: #B0B7BF;
  --light: #F4F6F9;
  --off-white: #FAFBFD;
  --white: #FFFFFF;
  --accent-bg: #E8F0FA;

  /* Cores — Efeitos */
  --glass: rgba(22, 29, 53, 0.85);

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(22,29,53,0.06);
  --shadow-md: 0 8px 32px rgba(22,29,53,0.10);
  --shadow-lg: 0 16px 48px rgba(22,29,53,0.14);
  --shadow-hover: 0 20px 50px rgba(0,0,0,0.15);
  --shadow-card: 0 4px 20px rgba(22,29,53,0.08);
  --shadow-float: 0 8px 24px rgba(37,211,102,0.35);

  /* Border Radius */
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 16px;
  --radius-pill: 100px;

  /* Font Weights */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extra: 800;

  /* Animation Timing */
  --dur-fast: 0.3s;
  --dur-normal: 0.6s;
  --dur-slow: 1s;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Transitions (legacy — manter compat) */
  --transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─────────────────────────────────────────────
   F11.11 — Empty States (utility)
   Uso: <div class="empty-state">
          <svg class="empty-state-icon">...</svg>
          <p class="empty-state-title">Nada aqui ainda</p>
          <p class="empty-state-sub">Descrição amigável</p>
        </div>
   ───────────────────────────────────────────── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
  color: var(--gray);
}
.empty-state-icon {
  width: 64px;
  height: 64px;
  margin-bottom: 16px;
  opacity: 0.4;
  stroke: var(--navy);
  stroke-width: 1.6;
  fill: none;
}
.empty-state-title {
  font-size: 15px;
  font-weight: var(--fw-semibold);
  color: var(--navy);
  margin: 0 0 6px;
}
.empty-state-sub {
  font-size: 13px;
  color: var(--gray);
  margin: 0;
  max-width: 320px;
  line-height: 1.5;
}

/* ─────────────────────────────────────────────
   F11.12 — Loading Skeletons (pulse)
   Uso: <div class="skeleton skeleton-text"></div>
        <div class="skeleton skeleton-card"></div>
   ───────────────────────────────────────────── */
@keyframes skeleton-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.skeleton {
  background: linear-gradient(90deg, #E5E7EB 25%, #F3F4F6 50%, #E5E7EB 75%);
  background-size: 200% 100%;
  border-radius: var(--radius-sm);
  animation: skeleton-pulse 1.4s ease-in-out infinite;
}
.skeleton-text {
  height: 12px;
  margin-bottom: 8px;
}
.skeleton-text.short { width: 40%; }
.skeleton-text.medium { width: 70%; }
.skeleton-text.long { width: 100%; }
.skeleton-title {
  height: 20px;
  width: 60%;
  margin-bottom: 12px;
  border-radius: var(--radius-sm);
}
.skeleton-card {
  height: 140px;
  width: 100%;
  border-radius: var(--radius);
  margin-bottom: 12px;
}
.skeleton-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; }
}