/* ==========================================================================
   FAMILIARIA CLUB • DESIGN SYSTEM CANÔNICO GOOGLE WORKSPACE & MATERIAL DESIGN 3 (M3)
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Roboto:wght@400;500;700&display=swap');

:root {
  /* --- TIPOGRAFIA GOOGLE SUAVE --- */
  --m3-font-heading: 'Plus Jakarta Sans', 'Google Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --m3-font-body: 'Roboto', 'Plus Jakarta Sans', sans-serif;

  /* --- PALETA PRIMÁRIA FAMILIARIA (ROXO SOBERANO & LAVANDA ACOLHEDOR) --- */
  --m3-primary: #6D28D9;
  --m3-on-primary: #FFFFFF;
  --m3-primary-container: #EDE9FE;
  --m3-on-primary-container: #2E1065;
  --m3-primary-hover: #5B21B6;

  /* --- PALETA SECUNDÁRIA (AZUL EXECUTIVO B2B CORPORATIVO) --- */
  --m3-secondary: #00639B;
  --m3-on-secondary: #FFFFFF;
  --m3-secondary-container: #CEE5FF;
  --m3-on-secondary-container: #001D33;
  --m3-secondary-hover: #004B76;

  /* --- ACENTO TÉRMICO SOLAR (ÂMBAR / HEADSPACE WARMTH) --- */
  --m3-tertiary: #D97706;
  --m3-on-tertiary: #FFFFFF;
  --m3-tertiary-container: #FEF3C7;
  --m3-on-tertiary-container: #78350F;

  /* --- ACENTO CLÍNICO & PREVENTIVO (MENTA / ESMERALDA & PIX FARMA) --- */
  --m3-health: #059669;
  --m3-on-health: #FFFFFF;
  --m3-health-container: #D1FAE5;
  --m3-on-health-container: #064E3B;

  /* --- SUPERFÍCIES TONAIS M3 (TEMA CLARO HIGH-KEY CLEAN) --- */
  --m3-surface: #F8F9FA;
  --m3-surface-container-lowest: #FFFFFF;
  --m3-surface-container-low: #F0F4F9;
  --m3-surface-container: #E9EEF6;
  --m3-surface-container-high: #E3E8EF;
  --m3-surface-container-highest: #DBE1E9;

  --m3-on-surface: #1F1F1F;
  --m3-on-surface-variant: #444746;
  --m3-outline: #747775;
  --m3-outline-variant: #E0E2EC;

  /* --- SUPERFÍCIES TEMA ESCURO (PRO CHARCOAL - NUNCA PRETO PURO #000000) --- */
  --m3-dark-surface: #121212;
  --m3-dark-surface-container-low: #18191B;
  --m3-dark-surface-container: #1E1F22;
  --m3-dark-surface-container-high: #282A2F;
  --m3-dark-on-surface: #E3E3E3;
  --m3-dark-on-surface-variant: #C4C7C5;
  --m3-dark-outline: #444746;
  --m3-dark-outline-variant: rgba(255, 255, 255, 0.12);

  /* --- STATUS SEMÂNTICOS --- */
  --m3-success: #146C2E;
  --m3-success-container: #C4EED0;
  --m3-warning: #B35C00;
  --m3-warning-container: #FFE0C2;
  --m3-error: #BA1A1A;
  --m3-error-container: #FFDAD6;

  /* --- ELEVAÇÕES TONAIS M3 SUTIS (ZERO SOMBRAS PESADAS) --- */
  --m3-elevation-1: 0px 1px 3px 1px rgba(0, 0, 0, 0.06), 0px 1px 2px 0px rgba(0, 0, 0, 0.04);
  --m3-elevation-2: 0px 2px 6px 2px rgba(0, 0, 0, 0.06), 0px 1px 2px 0px rgba(0, 0, 0, 0.04);
  --m3-elevation-3: 0px 4px 12px 3px rgba(0, 0, 0, 0.08), 0px 2px 6px 0px rgba(0, 0, 0, 0.04);

  /* --- GEOMETRIA M3 CANÔNICA --- */
  --m3-radius-full: 9999px;
  --m3-radius-xl: 28px;
  --m3-radius-lg: 20px;
  --m3-radius-md: 14px;
  --m3-radius-sm: 8px;
}

body {
  font-family: var(--m3-font-body);
  background-color: var(--m3-surface);
  color: var(--m3-on-surface);
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--m3-font-heading);
  font-weight: 600;
  color: var(--m3-on-surface);
  letter-spacing: -0.02em;
  margin: 0;
}

/* ==========================================================================
   LEI SOBERANA 1: ZERO QUEBRA DE LINHA EM CONTROLES E FRAÇÕES DE MOEDA
   ========================================================================== */
.btn-pill,
.badge-pill,
.chip-pill,
.tab-pill,
button,
a.btn-pill,
.currency-nowrap,
.price-container {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

/* ==========================================================================
   COMPONENTES GOOGLE M3 PADRONIZADOS
   ========================================================================== */

/* Botão Pílula M3 Primário (Roxo Familiaria) */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: var(--m3-primary);
  color: var(--m3-on-primary) !important;
  font-family: var(--m3-font-heading);
  font-size: 15px;
  font-weight: 600;
  padding: 12px 28px;
  border-radius: var(--m3-radius-full);
  border: none;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
  box-shadow: var(--m3-elevation-1);
}

.btn-primary:hover {
  background-color: var(--m3-primary-hover);
  box-shadow: var(--m3-elevation-2);
  transform: translateY(-1px);
}

/* Botão Pílula Tonal / Secundário M3 */
.btn-tonal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: var(--m3-primary-container);
  color: var(--m3-on-primary-container) !important;
  font-family: var(--m3-font-heading);
  font-size: 15px;
  font-weight: 600;
  padding: 12px 24px;
  border-radius: var(--m3-radius-full);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
}

.btn-tonal:hover {
  background-color: #DDD6FE;
  color: #2E1065 !important;
}

/* Botão Outlined M3 */
.btn-outlined {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: transparent;
  color: var(--m3-on-surface) !important;
  font-family: var(--m3-font-heading);
  font-size: 14px;
  font-weight: 600;
  padding: 10px 22px;
  border-radius: var(--m3-radius-full);
  border: 1px solid var(--m3-outline-variant);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
}

.btn-outlined:hover {
  background-color: var(--m3-surface-container-low);
  border-color: var(--m3-outline);
}

/* Badges e Chips M3 */
.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--m3-radius-full);
  font-family: var(--m3-font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

.badge-lavender {
  background-color: var(--m3-primary-container);
  color: var(--m3-on-primary-container);
  border: 1px solid rgba(109, 40, 217, 0.15);
}

.badge-amber {
  background-color: var(--m3-tertiary-container);
  color: var(--m3-on-tertiary-container);
  border: 1px solid rgba(217, 119, 6, 0.2);
}

.badge-mint {
  background-color: var(--m3-health-container);
  color: var(--m3-on-health-container);
  border: 1px solid rgba(5, 150, 105, 0.2);
}

.badge-blue {
  background-color: var(--m3-secondary-container);
  color: var(--m3-on-secondary-container);
  border: 1px solid rgba(0, 99, 155, 0.2);
}

/* Cards M3 com Superfície Tonal */
.m3-card {
  background-color: var(--m3-surface-container-lowest);
  border: 1px solid var(--m3-outline-variant);
  border-radius: var(--m3-radius-lg);
  padding: 24px;
  box-shadow: var(--m3-elevation-1);
  transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
}

.m3-card:hover {
  box-shadow: var(--m3-elevation-2);
}

.m3-card-subtle {
  background-color: var(--m3-surface-container-low);
  border: 1px solid var(--m3-outline-variant);
  border-radius: var(--m3-radius-lg);
  padding: 24px;
}