/* Global style guide derived from uploaded design */
:root{
  --color-primary: #12725e; /* brand primary (green) */
  --color-primary-10: #cef7df;
  --color-primary-20: #69d4a9;
  --color-secondary: #3366ff; /* accent */
  --color-info: #1890ff;
  --color-success: #54d62c;
  --color-warning: #ffc107;
  --color-error: #ff4842;

  --color-bg: #ffffff;
  --color-surface: #f4f6f8;
  --color-muted: #919eab;
  --color-text: #212b36;

  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  --font-size-base: 16px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --shadow-sm: 0 4px 10px rgba(33,43,54,0.06);
}

/* Typography */
html { font-family: var(--font-sans); font-size: var(--font-size-base); color: var(--color-text); }
h1 { font-size: 2rem; font-weight:700; }
h2 { font-size: 1.5rem; font-weight:600; }
h3 { font-size: 1.25rem; font-weight:600; }
p, li, a, span { font-size: 0.95rem; line-height:1.45; }

/* Utilities */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 16px; border-radius:var(--radius-sm); cursor:pointer; border:0; }
.btn-primary { background:var(--color-primary); color:#fff; }
.btn-ghost { background:transparent; color:var(--color-text); border:1px solid rgba(0,0,0,0.06); }

.card { background:var(--color-bg); border-radius:var(--radius-md); box-shadow:var(--shadow-sm); overflow:hidden; }
.card-body { padding:16px; }

.badge { display:inline-block; padding:6px 10px; border-radius:999px; font-size:0.8rem; }
.badge-live { background: linear-gradient(90deg,var(--color-primary), var(--color-secondary)); color:white; padding:6px 10px; border-radius:999px; font-weight:600; }

/* Layout helpers */
.col { flex:1; }

/* Mobile specific tweaks */
@media (max-width: 768px) {
  h1{ font-size:1.5rem; }
  .container{ padding:0 12px; }
}