:root {
  --font-display: 'Outfit', sans-serif;
  --font-body:    'IBM Plex Sans', sans-serif;

  --bg:      #f1f5f9;
  --bg-soft: #e8edf3;

  --surface:   #ffffff;
  --surface-2: #f8fafc;
  --surface-3: #f1f5f9;

  --text:   #0f172a;
  --text-2: #1e3a5f;
  --muted:  #64748b;
  --subtle: #94a3b8;

  --brand:        #0284c7;
  --brand-dark:   #0369a1;
  --brand-hover:  #0ea5e9;
  --brand-light:  #e0f2fe;
  --brand-2:      #0ea5e9;

  --accent:       #f97316;
  --accent-light: #ffedd5;

  --ok:           #059669;
  --ok-light:     #d1fae5;
  --warn:         #d97706;
  --warn-light:   #fef3c7;
  --danger:       #dc2626;
  --danger-light: #fee2e2;

  --line:   #e2e8f0;
  --line-2: #cbd5e1;

  --sidebar-bg:     #111827;
  --sidebar-hover:  #1f2937;
  --sidebar-active: #0ea5e9;
  --sidebar-text:   #d1d5db;
  --sidebar-width:  248px;

  --shadow-xs: 0 1px 3px rgba(15, 23, 42, .08);
  --shadow-sm: 0 4px 12px rgba(15, 23, 42, .07);
  --shadow-md: 0 8px 28px rgba(15, 23, 42, .10);
  --shadow-lg: 0 20px 56px rgba(15, 23, 42, .15);

  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
}

.color-brand  { color: var(--brand);  }
.color-ok     { color: var(--ok);     }
.color-warn   { color: var(--warn);   }
.color-danger { color: var(--danger); }
.color-muted  { color: var(--muted);  }

.purple       { background: linear-gradient(135deg, var(--brand-dark), var(--brand)); }
.yellow       { background: linear-gradient(135deg, #f59e0b, #fbbf24); }
.indigo       { background: linear-gradient(135deg, #4f46e5, #6366f1); }
.purple-text  { color: var(--brand);  }
.yellow-text  { color: #d97706;       }
.indigo-text  { color: #4f46e5;       }

@keyframes riseIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0);    }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}