/* =============================================================
   RPA Online · Esmeralda Praia Hotel
   Sistema de Design — Tokens
   ============================================================= */

:root {
  /* — Paleta institucional Esmeralda — */
  --mar-50:  #EFE9E0;
  --mar-100: #E3D9C9;
  --mar-200: #D2C3AC;
  --mar-300: #B9A47F;
  --mar-400: #A2885C;
  --mar-500: #8A6E45;   /* primário · dourado/bronze Esmeralda */
  --mar-600: #6F5837;
  --mar-700: #5A472C;
  --mar-800: #41331F;
  --mar-900: #2E2519;

  --areia-50:  #FBF7F0;
  --areia-100: #F5EDDE;
  --areia-200: #ECDFC2;
  --areia-300: #DECBA1;
  --areia-400: #C5AC7F;
  --areia-500: #A88B5A;

  /* — Neutros — */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #FAF8F5;
  --neutral-100: #F2EEE8;
  --neutral-200: #EAE6E0;
  --neutral-300: #DAD4CB;
  --neutral-400: #B8B4AD;
  --neutral-500: #8C8881;
  --neutral-600: #6B6660;
  --neutral-700: #4A453F;
  --neutral-800: #2B2A28;
  --neutral-900: #1C1A17;

  /* — Status semânticos — */
  --success-50:  #EEF2EB;
  --success-100: #DCE6D6;
  --success-500: #5B7A52;
  --success-600: #4A6543;
  --success-700: #3B5135;

  --warning-50:  #F8F0E1;
  --warning-100: #EFE0C5;
  --warning-500: #C08A3E;
  --warning-600: #9F7130;
  --warning-700: #7E5924;

  --danger-50:  #F7EAE8;
  --danger-100: #EFD5D2;
  --danger-500: #B4524A;
  --danger-600: #97433C;
  --danger-700: #79362F;

  --info-50:    #EFF6FF;
  --info-100:   #DBEAFE;
  --info-500:   #2563EB;

  /* — Cores semânticas (aliases) — */
  --primary:        var(--mar-500);
  --primary-hover:  var(--mar-600);
  --primary-soft:   var(--mar-50);
  --primary-fg:     #FFFFFF;

  --bg:             var(--neutral-50);
  --surface:        var(--neutral-0);
  --surface-muted:  var(--neutral-100);
  --border:         var(--neutral-200);
  --border-strong:  var(--neutral-300);

  --text:           var(--neutral-800);
  --text-muted:     var(--neutral-500);
  --text-faint:     var(--neutral-400);

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

  --fs-xs:   11px;
  --fs-sm:   12px;
  --fs-base: 14px;
  --fs-md:   15px;
  --fs-lg:   17px;
  --fs-xl:   20px;
  --fs-2xl:  24px;
  --fs-3xl:  30px;
  --fs-4xl:  36px;
  --fs-5xl:  48px;
  --fs-6xl:  60px;

  /* — Espaçamento (escala 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 — */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-2xl: 20px;
  --r-full: 9999px;

  /* — Elevation — */
  --shadow-xs: 0 1px 2px rgba(15,15,14,0.04);
  --shadow-sm: 0 1px 3px rgba(15,15,14,0.06), 0 1px 2px rgba(15,15,14,0.04);
  --shadow-md: 0 4px 8px rgba(15,15,14,0.06), 0 2px 4px rgba(15,15,14,0.04);
  --shadow-lg: 0 12px 24px rgba(15,15,14,0.08), 0 4px 8px rgba(15,15,14,0.04);
  --shadow-xl: 0 24px 48px rgba(15,15,14,0.12), 0 8px 16px rgba(15,15,14,0.06);

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

/* — Base reset (apenas dentro de .rpa-app) — */
.rpa-app, .rpa-app * {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.rpa-app {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  color: var(--text);
  line-height: 1.5;
  letter-spacing: -0.005em;
}

.rpa-app h1, .rpa-app h2, .rpa-app h3, .rpa-app h4, .rpa-app h5, .rpa-app h6,
.rpa-app p, .rpa-app ul, .rpa-app ol, .rpa-app figure {
  margin: 0;
  padding: 0;
}
.rpa-app ul, .rpa-app ol { list-style: none; }
.rpa-app button { font-family: inherit; }

/* Numeric tabular */
.tnum { font-variant-numeric: tabular-nums; }

/* Scroll áreas: scrollbar fininha estilo macOS */
.rpa-app *::-webkit-scrollbar { width: 8px; height: 8px; }
.rpa-app *::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 8px; }
.rpa-app *::-webkit-scrollbar-track { background: transparent; }
