@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ── Paleta Community Go ── */
  --brand:        #0B2559;
  --brand-dark:   #081840;
  --brand-light:  #EEF3FF;
  --brand-mid:    #1E5BFA;
  --accent:       #00BBD4;
  --accent-bg:    #E4F7FA;
  --green:        #4CCB2A;
  --green-light:  #A8E63A;
  --green-bg:     #EDFCD6;
  --green-text:   #1a5c06;
  --amber:        #F59E0B;
  --amber-bg:     #FEF3C7;
  --amber-text:   #92400E;
  --red:          #EF4444;
  --red-bg:       #FEE2E2;
  --red-text:     #991B1B;
  --purple:       #8B5CF6;
  --purple-bg:    #EDE9FE;
  --gray-50:      #F5F7FA;
  --gray-100:     #F3F4F6;
  --gray-200:     #E2E8F0;
  --gray-300:     #D1D5DB;
  --gray-400:     #9CA3AF;
  --gray-500:     #6B7280;
  --gray-600:     #4B5563;
  --gray-700:     #374151;
  --gray-800:     #1A1F2E;
  --gray-900:     #0B2559;
  --sidebar:      #0B2559;
  --sidebar-2:    #0d2e6e;
  --text:         #0B2559;
  --text2:        #6B7280;
  --border:       #E2E8F0;
  --surface:      #FFFFFF;
  --bg:           #F5F7FA;
  --radius:       14px;
  --radius-sm:    9px;
  --radius-lg:    20px;
  --shadow-sm:    0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow:       0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg:    0 12px 40px rgba(0,0,0,0.12);
  --shadow-brand: 0 8px 24px rgba(11,37,89,0.25);
  --transition:   all 0.22s cubic-bezier(0.4,0,0.2,1);
}

html, body { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 14px; color: var(--text); min-height: 100vh; }
body { background: var(--bg); }
a { color: inherit; text-decoration: none; }
input, select, textarea, button { font-family: inherit; font-size: 14px; }

/* ── ANIMATIONS ── */
@keyframes fadeIn   { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
@keyframes slideIn  { from { opacity:0; transform:translateX(-16px); } to { opacity:1; transform:translateX(0); } }
@keyframes scaleIn  { from { opacity:0; transform:scale(0.95); } to { opacity:1; transform:scale(1); } }
@keyframes pulse    { 0%,100%{transform:scale(1);} 50%{transform:scale(1.05);} }
@keyframes shimmer  { 0%{background-position:-200% 0;} 100%{background-position:200% 0;} }
@keyframes spin     { from{transform:rotate(0deg);} to{transform:rotate(360deg);} }
@keyframes bounceIn { 0%{opacity:0;transform:scale(0.3);} 50%{transform:scale(1.05);} 70%{transform:scale(0.9);} 100%{opacity:1;transform:scale(1);} }
@keyframes slideUp  { from{opacity:0;transform:translateY(20px);} to{opacity:1;transform:translateY(0);} }

.animate-fade   { animation: fadeIn 0.35s ease both; }
.animate-slide  { animation: slideIn 0.3s ease both; }
.animate-scale  { animation: scaleIn 0.25s ease both; }
.animate-up     { animation: slideUp 0.4s ease both; }

.stagger-1 { animation-delay: 0.05s; }
.stagger-2 { animation-delay: 0.10s; }
.stagger-3 { animation-delay: 0.15s; }
.stagger-4 { animation-delay: 0.20s; }
.stagger-5 { animation-delay: 0.25s; }
.stagger-6 { animation-delay: 0.30s; }

/* ── SKELETON LOADING ── */
.skeleton {
  background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-200) 50%, var(--gray-100) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: var(--radius-sm);
}

/* ── UTILITY ── */
.hidden { display: none !important; }
.flex   { display: flex; }
.flex-col { flex-direction: column; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.flex-wrap  { flex-wrap: wrap; }
.gap-6  { gap: 6px; }
.gap-8  { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.w-full { width: 100%; }
.text-center { text-align: center; }
.fw-700 { font-weight: 700; }
.fw-600 { font-weight: 600; }
.fw-500 { font-weight: 500; }
.text-muted { color: var(--text2); }
.text-brand { color: var(--brand); }
.mt-4  { margin-top:4px; }  .mt-8  { margin-top:8px; }
.mt-12 { margin-top:12px; } .mt-16 { margin-top:16px; }
.mt-20 { margin-top:20px; } .mb-8  { margin-bottom:8px; }
.mb-12 { margin-bottom:12px; } .mb-16 { margin-bottom:16px; }
.mb-20 { margin-bottom:20px; }