/* ==========================================================================
   digHy — Base & semantic helpers
   html/body reset, type styles, and the canonical component helper classes
   (.dighy-card, .dighy-btn, .dighy-badge, .dighy-input) used by preview
   cards and quick mockups. React components live in components/.
   ========================================================================== */

html, body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ----- Semantic type ----- */
.h-hero {
  font-family: var(--font-body);
  font-size: var(--text-hero);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  background: linear-gradient(to right bottom, rgb(255,255,255) 30%, rgba(255,255,255,0.38)) text;
  -webkit-text-fill-color: transparent;
  padding-bottom: 0.13em;
}
.h1 { font-size: var(--text-3xl); font-weight: 700; line-height: 1.15; color: hsl(var(--foreground)); }
@media (min-width: 768px) { .h1 { font-size: var(--text-4xl); } }
.h2 { font-size: var(--text-2xl); font-weight: 700; line-height: 1.2; color: hsl(var(--foreground)); }
@media (min-width: 768px) { .h2 { font-size: var(--text-3xl); } }
.h3 { font-size: var(--text-lg); font-weight: 600; color: hsl(var(--foreground)); }
.body { font-size: var(--text-sm); color: hsl(var(--foreground)); line-height: 1.5; }
.body-lg { font-size: var(--text-base); color: hsl(var(--foreground)); }
.muted { color: hsl(var(--muted-foreground)); font-size: var(--text-sm); }
.caption { font-size: var(--text-xs); color: hsl(var(--muted-foreground)); }
.eyebrow {
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: hsl(var(--muted-foreground));
  font-weight: 500;
}
.kpi-value { font-size: var(--text-2xl); font-weight: 700; color: hsl(var(--primary)); }
.brand-font { font-family: var(--font-brand); font-weight: 900; letter-spacing: -0.01em; }
.code, code, pre {
  font-family: ui-monospace, 'SF Mono', Monaco, Consolas, 'Liberation Mono', monospace;
  font-size: 0.85em;
  background: hsl(var(--secondary));
  padding: 0.1em 0.35em;
  border-radius: var(--radius-sm);
}

/* ----- Component helper classes ----- */
.dighy-card {
  background: var(--gradient-card);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  transition: var(--transition-smooth);
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.05);
}
.dighy-card:hover { border-color: hsl(var(--primary) / 0.5); }

.stat-card {
  background-color: hsl(var(--card) / 0.5);
  backdrop-filter: blur(8px);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 1rem;
  text-align: center;
}

.dighy-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: var(--radius);
  padding: 0.25rem 0.625rem;
  font-size: var(--text-xs);
  font-weight: 500;
}
.dighy-badge-primary { background: hsl(var(--primary) / 0.15); color: hsl(var(--primary)); border: 1px solid hsl(var(--primary) / 0.2); border-radius: var(--radius-pill); }
.dighy-badge-secondary { background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); }
.dighy-badge-outline { border: 1px solid hsl(var(--border)); color: hsl(var(--foreground)); }

.dighy-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.5rem;
  height: 2.75rem; padding: 0 2rem;
  border-radius: var(--radius-md);
  font-size: var(--text-sm); font-weight: 600;
  transition: var(--transition-button);
  cursor: pointer; border: none;
}
.dighy-btn-primary { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.dighy-btn-primary:hover { background: hsl(var(--primary-active)); }
.dighy-btn-outline { background: transparent; color: hsl(var(--primary)); border: 1px solid hsl(var(--input)); }
.dighy-btn-outline:hover { background: hsl(var(--primary) / 0.1); }
.dighy-btn-ghost { background: transparent; color: hsl(var(--foreground)); }
.dighy-btn-ghost:hover { background: hsl(var(--accent)); }

.dighy-input {
  width: 100%;
  background: hsl(var(--input));
  color: hsl(var(--foreground));
  border-radius: var(--radius-md);
  border: 1px solid hsl(var(--border));
  padding: 0.5rem 0.75rem;
  font-size: var(--text-sm);
  box-shadow: var(--shadow-input);
  outline: none;
}
.dighy-input::placeholder { color: hsl(var(--muted-foreground)); }
.dighy-input:focus { border-color: hsl(var(--primary)); box-shadow: var(--shadow-input), 0 0 0 2px hsl(var(--primary)); }

/* ----- Scrollbar ----- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: hsl(var(--background)); }
::-webkit-scrollbar-thumb { background: hsl(var(--muted)); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: hsl(var(--muted-foreground)); }