/* GHN Design System: tokens, shared components, layout primitives */
:root {
  --ghn-brand: #f7931e;
  --ghn-brand-hover: #e98212;
  --ghn-brand-soft: #fff7ed;
  --ghn-warning-soft: #fffbeb;
  --ghn-danger-soft: #fef2f2;
  --ghn-success-soft: #f0fdf4;
  --ghn-border: #d9dee7;
  --ghn-surface: #ffffff;
  --ghn-surface-subtle: #fbfcfe;
  --ghn-radius-sm: 6px;
  --ghn-radius-md: 8px;
  --ghn-radius-lg: 12px;
  --ghn-space-2: 8px;
  --ghn-space-3: 12px;
  --ghn-space-4: 16px;
}

.ds-stack {
  display: grid;
  gap: var(--ghn-space-3);
}

.ds-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ghn-space-3);
}

.ds-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ghn-space-3);
}

.ds-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ghn-space-3);
}

.ds-panel {
  border-radius: var(--ghn-radius-md);
}

.ds-page-hero {
  border-color: #fdba74;
  background: linear-gradient(135deg, var(--ghn-brand-soft) 0%, var(--ghn-surface) 72%);
}

.ds-kpi-card {
  min-height: 96px;
  border-radius: var(--ghn-radius-md);
}

.ds-kpi-card strong {
  color: #111827;
}

.ds-kpi-card.primary-kpi strong,
.ds-kpi-card.dashboard-status-card strong {
  color: var(--ghn-brand);
}

.ds-leaderboard-card {
  display: grid;
  gap: var(--ghn-space-2);
  background: var(--ghn-surface-subtle);
}

.ds-rank-row {
  min-height: 64px;
}

@media (max-width: 860px) {
  .ds-grid-2,
  .ds-grid-3,
  .ds-grid-4 {
    grid-template-columns: 1fr;
  }
}