/* Project theme tokens: colors, surfaces, and reusable components */
:root {
  --bg: #ffffff;
  --surface: #f8fafc;
  --muted-surface: #f2f4f7;

  --text: #111827;
  --muted: #6b7280;

  --border: #eaeef3;
  --ring: #93c5fd;

  --primary: #0ea5e9;     /* Sky-500 */
  --primary-600: #0284c7; /* Sky-600 */
  --success: #16a34a;     /* Green-600 */
  --danger: #ef4444;      /* Red-500 */
  --warning: #f59e0b;     /* Amber-500 */
}

body { background: var(--bg); color: var(--text); }

/* Cards */
.card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
}
.card-elevate:hover {
  box-shadow: 0 6px 18px rgba(17, 24, 39, 0.08);
  transform: translateY(-1px);
}

/* Minimal input */
.input {
  height: 44px;
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #ffffff;
  outline: none;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.2);
}

/* Buttons */
.btn {
  height: 40px;
  padding: 0 14px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.btn-primary {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}
.btn-primary:hover { background: var(--primary-600); border-color: var(--primary-600); }
.btn-outline {
  background: #ffffff;
  color: var(--text);
  border-color: var(--border);
}
.btn-outline:hover { border-color: #d6dde6; background: var(--surface); }

/* Badges */
.badge {
  font-size: 10px;
  line-height: 16px;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--muted-surface);
  color: var(--muted);
  border: 1px solid var(--border);
}
.badge-primary { background: rgba(14,165,233,.1); color: var(--primary-600); border-color: rgba(14,165,233,.2); }

/* Helpers */
.surface { background: var(--surface); }
.muted { color: var(--muted); }
.bordered { border: 1px solid var(--border); }
.rounded-12 { border-radius: 12px; }
.rounded-14 { border-radius: 14px; }