/* =============================================================
   Portal de Gestão Esmeralda
   Design System — Tokens (marrom/cream · "hotel premium")
   ============================================================= */

:root {
  /* — Marca: marrom/cream — */
  --esm-brown:        #966E4D;   /* primário */
  --esm-brown-dark:   #5E4332;
  --esm-brown-darker: #3E2C20;
  --esm-brown-soft:   #F0E7DA;   /* fundo de chip primário */
  --esm-brown-100:    #E3D4C2;

  --esm-cream:        #F5EFE6;
  --esm-cream-2:      #EFE6D8;
  --esm-gold:         #C2A15B;
  --esm-gold-soft:    #F3EAD4;

  --esm-ink:          #2E2620;   /* texto principal */
  --esm-muted:        #8A7B6B;   /* texto secundário */
  --esm-faint:        #B3A593;   /* texto terciário */
  --esm-line:         #E7DCCB;   /* bordas */
  --esm-line-soft:    #F0E8DC;

  --esm-surface:      #FFFFFF;
  --esm-surface-2:    #FBF8F2;   /* cards alternados / hover */
  --esm-bg:           #F5EFE6;

  /* — Semântica (sem verde de marca) — */
  --esm-success:      #4A7A52;
  --esm-success-soft: #E6EFE7;
  --esm-warning:      #C08A2E;
  --esm-warning-soft: #F6ECD8;
  --esm-error:        #B4564E;
  --esm-error-soft:   #F6E3E1;
  --esm-info:         #4E6E8C;
  --esm-info-soft:    #E4ECF2;

  /* — Tipografia — */
  --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* — Escala — */
  --fs-xs: 11px;  --fs-sm: 12px;  --fs-base: 13px;  --fs-md: 14px;
  --fs-lg: 16px;  --fs-xl: 19px;  --fs-2xl: 23px;   --fs-3xl: 28px;
  --fs-4xl: 34px; --fs-5xl: 44px; --fs-6xl: 56px;

  /* — Spacing 4pt — */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;  --sp-4: 16px;  --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px;

  /* — Radii (cards 16px) — */
  --r-sm: 8px;  --r-md: 12px;  --r-lg: 16px;  --r-xl: 20px;  --r-2xl: 24px;  --r-full: 9999px;

  /* — Sombras suaves (warm) — */
  --sh-xs: 0 1px 2px rgba(62,44,32,0.05);
  --sh-sm: 0 1px 3px rgba(62,44,32,0.06), 0 1px 2px rgba(62,44,32,0.04);
  --sh-md: 0 4px 12px rgba(62,44,32,0.07), 0 2px 4px rgba(62,44,32,0.04);
  --sh-lg: 0 12px 28px rgba(62,44,32,0.10), 0 4px 8px rgba(62,44,32,0.05);
  --sh-xl: 0 24px 48px rgba(62,44,32,0.14), 0 8px 16px rgba(62,44,32,0.06);

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

.esm, .esm * {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.esm {
  font-family: var(--font);
  font-size: var(--fs-base);
  color: var(--esm-ink);
  line-height: 1.5;
  letter-spacing: -0.006em;
}
.esm h1, .esm h2, .esm h3, .esm h4, .esm p, .esm ul, .esm ol, .esm figure { margin: 0; padding: 0; }
.esm ul, .esm ol { list-style: none; }
.esm button { font-family: inherit; }
.tnum { font-variant-numeric: tabular-nums; }

.esm *::-webkit-scrollbar { width: 9px; height: 9px; }
.esm *::-webkit-scrollbar-thumb { background: rgba(62,44,32,0.16); border-radius: 8px; }
.esm *::-webkit-scrollbar-track { background: transparent; }

@keyframes esm-shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
@keyframes esm-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

/* — Motion / interação — */
.esm button, .esm a, .esm .press { transition: transform 0.09s var(--ease), background 0.15s var(--ease), box-shadow 0.15s var(--ease); }
.esm button:active, .esm .press:active { transform: scale(0.96); }
@keyframes esm-pop { 0% { transform: scale(0.6); } 45% { transform: scale(1.3); } 100% { transform: scale(1); } }
@keyframes esm-fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes esm-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes esm-slide-down { from { opacity: 0; transform: translateY(-8px); max-height: 0; } to { opacity: 1; transform: none; max-height: 80px; } }
@keyframes esm-float-up { 0% { opacity: 0; transform: translateY(6px) scale(0.5); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(-28px) scale(1.1); } }
.esm-reveal { animation: esm-fade-up 0.5s var(--ease-out) both; }
.esm-pop { animation: esm-pop 0.32s var(--ease-out); }
.esm-slide { animation: esm-slide-down 0.26s var(--ease-out) both; }