/* MestreApp Lead — Design system tokens + reset + tipografia + animações */

:root {
  /* Paleta */
  --green-1: #16a34a;
  --green-2: #22c55e;
  --green-3: #15803d;
  --green-soft: rgba(34, 197, 94, .12);
  --bg: #080808;
  --card: #161b22;
  --card-2: #1c2230;
  --card-3: #232a3a;
  --border: #30363d;
  --border-strong: #424b5c;
  --text: #e6edf3;
  --muted: #8b949e;
  --success: #2ea043;
  --error: #f85149;
  --warn: #f1c40f;
  --info: #3498db;
  --purple: #9b59b6;

  /* Sombras */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 4px 12px rgba(0,0,0,.45);
  --shadow-lg: 0 12px 32px rgba(0,0,0,.55);
  --shadow-glow: 0 0 0 3px rgba(22, 163, 74, .25);

  /* Radius */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;

  /* Tipografia */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --fs-sm: 12px;
  --fs-base: 14px;
  --fs-lg: 16px;
  --fs-xl: 20px;
  --fs-2xl: 28px;

  /* Timing */
  --t-fast: 120ms;
  --t-med: 240ms;
  --t-slow: 400ms;
  --ease-out: cubic-bezier(.2,.7,.2,1);
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
input, select, textarea { font: inherit; }
img { display: block; max-width: 100%; }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

/* Inter via Google Fonts opcional — fallback é sans-serif do sistema */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ── Animações utilitárias ─────────────────────────────────────────────────── */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideInRight { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes slideInUp { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes scaleIn { from { transform: scale(.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes shimmer { 0% { background-position: -468px 0; } 100% { background-position: 468px 0; } }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes ringPulse { 0% { box-shadow: 0 0 0 0 rgba(22, 163, 74, .55); } 70% { box-shadow: 0 0 0 12px rgba(22, 163, 74, 0); } 100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); } }

.fade-in     { animation: fadeIn var(--t-med) var(--ease-out) both; }
.slide-up    { animation: slideInUp var(--t-med) var(--ease-out) both; }
.scale-in    { animation: scaleIn var(--t-med) var(--ease-out) both; }
.pulse       { animation: pulse 1.6s infinite; }

/* Skeleton loader */
.skeleton {
  background: linear-gradient(90deg, #1a2030 0%, #232a3a 50%, #1a2030 100%);
  background-size: 936px 100%;
  animation: shimmer 1.4s linear infinite;
  border-radius: var(--r-sm);
  color: transparent;
  user-select: none;
}

/* Spinner */
.spinner {
  display: inline-block;
  width: 16px; height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin .8s linear infinite;
  vertical-align: middle;
}
.spinner-lg { width: 28px; height: 28px; border-width: 3px; }