:root {
  /* Typography */
  --hf-font-sans: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Noto Nastaliq Urdu", sans-serif;
  --hf-font-size-h1: 2rem; /* 32px */
  --hf-font-size-h2: 1.5rem; /* 24px */
  --hf-font-size-h3: 1.25rem; /* 20px */
  --hf-font-size-body: 13px;
  --hf-font-size-caption: 11px;
  --hf-line-height-h1: 1.2;
  --hf-line-height-h2: 1.25;
  --hf-line-height-h3: 1.3;
  --hf-line-height-body: 1.5;
  --hf-line-height-caption: 1.4;

  /* Color tokens (light) */
  --hf-color-primary: #059669;
  --hf-color-accent: #7c3aed; /* violet */
  --hf-color-success: #059669;
  --hf-color-warning: #d97706; /* amber */
  --hf-color-danger: #dc2626; /* rose-red */

  --hf-color-text: #0f172a; /* slate-900 */
  --hf-color-muted: #475569; /* slate-600 */
  --hf-color-border: rgba(148, 163, 184, 0.35);

  --hf-color-surface-0: #ffffff;
  --hf-color-surface-1: #f8fafc; /* slate-50 */
  --hf-color-surface-2: #f1f5f9; /* slate-100 */
  --hf-color-surface-3: #e2e8f0; /* slate-200 */
  --hf-color-surface-4: #cbd5e1; /* slate-300 */

  /* Elevation / shadows (light) */
  --hf-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --hf-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.12);

  /* Radii */
  --hf-radius-sm: 8px;
  --hf-radius-md: 12px;
  --hf-radius-lg: 16px;
  --hf-radius-xl: 20px;
  --hf-radius-pill: 9999px;

  /* Spacing scale (4px base) */
  --hf-space-1: 4px;
  --hf-space-2: 8px;
  --hf-space-3: 12px;
  --hf-space-4: 16px;
  --hf-space-5: 24px;
  --hf-space-6: 32px;
  --hf-space-7: 48px;
    --hf-color-chart-1: #059669;
    --hf-color-chart-2: #0d9488;
    --hf-color-chart-3: #14b8a6;
    --hf-color-chart-4: #0f766e;
    --hf-color-chart-5: #d97706;
    --hf-color-chart-6: #64748b;
    --hf-color-chart-7: #0284c7;
    --hf-color-chart-8: #0ea5e9;

/* Unified dark mode for token consumers */
html[data-theme="dark"],
body.theme-dark,
body[data-theme="dark"] {
  --hf-color-text: #e2e8f0; /* slate-200 */
  --hf-color-muted: #94a3b8; /* slate-400 */
  --hf-color-border: rgba(148, 163, 184, 0.28);

  --hf-color-surface-0: #0b1220;
  --hf-color-surface-1: #0f172a;
  --hf-color-surface-2: #111c33;
  --hf-color-surface-3: #1f2a44;
  --hf-color-surface-4: #32415f;

  --hf-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --hf-shadow-md: 0 12px 40px rgba(0, 0, 0, 0.45);
}

/* Optional utility classes for future work (safe: opt-in only) */
.hf-font-sans {
  font-family: var(--hf-font-sans);
}

.hf-text-h1 {
  font-size: var(--hf-font-size-h1);
  line-height: var(--hf-line-height-h1);
  font-weight: 800;
}
.hf-text-h2 {
  font-size: var(--hf-font-size-h2);
  line-height: var(--hf-line-height-h2);
  font-weight: 800;
}
.hf-text-h3 {
  font-size: var(--hf-font-size-h3);
  line-height: var(--hf-line-height-h3);
  font-weight: 800;
}
.hf-text-body {
  font-size: var(--hf-font-size-body);
  line-height: var(--hf-line-height-body);
}
.hf-text-caption {
  font-size: var(--hf-font-size-caption);
  line-height: var(--hf-line-height-caption);
}

/* Button variants — define once; opt-in use `.btn` classes */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: calc(var(--hf-space-3)) var(--hf-space-4);
  border-radius: var(--hf-radius-md);
  border: 1px solid transparent;
  font-weight: 700;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease, border-color 0.12s ease;
  text-decoration: none;
  user-select: none;
  box-shadow: none;
}

.btn-primary {
  background: var(--hf-color-primary);
  color: #fff;
  border-color: rgba(0, 0, 0, 0);
  box-shadow: var(--hf-shadow-sm);
}
.btn-primary:hover {
  transform: translateY(-1px);
}

.btn-secondary {
  background: var(--hf-color-surface-0);
  color: var(--hf-color-text);
  border-color: var(--hf-color-border);
  box-shadow: var(--hf-shadow-sm);
}
.btn-secondary:hover {
  transform: translateY(-1px);
}

.btn-ghost {
  background: transparent;
  color: var(--hf-color-text);
  border-color: var(--hf-color-border);
}
.btn-ghost:hover {
  background: var(--hf-color-surface-1);
}

.btn-danger {
  background: var(--hf-color-danger);
  color: #fff;
  border-color: rgba(0, 0, 0, 0);
  box-shadow: var(--hf-shadow-sm);
}