:root {
  --hc-surface: #ffffff;
  --hc-surface-alt: #f8fbfb;
  --hc-page-bg: #f4fbfa;
  --hc-border: rgba(15, 23, 42, 0.1);
  --hc-text: #0f172a;
  --hc-text-soft: #475569;
  --hc-accent: #00d4b8;
  --hc-accent-dark: #009e85;
  --hc-accent-light: #2de0ca;
  --hc-accent-soft: rgba(0, 212, 184, 0.12);
  --hc-hero-start: #031825;
  --hc-hero-mid: #052033;
  --hc-hero-end: #03111f;
  --hc-hero-glow: rgba(0, 212, 184, 0.2);
  --hc-shadow-sm: 0 10px 28px rgba(2, 8, 23, 0.08);
}

html.dark {
  --hc-surface: #041523;
  --hc-surface-alt: #061c2a;
  --hc-page-bg: #02101a;
  --hc-border: rgba(0, 212, 184, 0.2);
  --hc-text: #f8fafc;
  --hc-text-soft: rgba(248, 250, 252, 0.78);
  --hc-accent-soft: rgba(0, 212, 184, 0.18);
  --hc-hero-start: #04111d;
  --hc-hero-mid: #062034;
  --hc-hero-end: #03111f;
  --hc-hero-glow: rgba(0, 212, 184, 0.24);
  --hc-shadow-sm: none;
}

.hc-page-bg {
  background: var(--hc-page-bg);
}

.hc-surface {
  background: var(--hc-surface);
  border: 1px solid var(--hc-border);
  box-shadow: var(--hc-shadow-sm);
}

.hc-hero-bg {
  background: linear-gradient(135deg, var(--hc-hero-start) 0%, var(--hc-hero-mid) 50%, var(--hc-hero-end) 100%);
}

.hc-hero-glow {
  background: radial-gradient(ellipse at 100% 50%, var(--hc-hero-glow) 0%, transparent 70%);
}

.hc-surface-alt {
  background: var(--hc-surface-alt);
  border: 1px solid var(--hc-border);
}

.hc-grad-text {
  background: linear-gradient(90deg, var(--hc-accent-dark), var(--hc-accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.hc-btn-primary {
  background: linear-gradient(135deg, var(--hc-accent-dark), var(--hc-accent));
  color: #ffffff;
  box-shadow: 0 6px 22px rgba(0, 212, 184, 0.35);
}

.hc-chip {
  background: var(--hc-accent-soft);
  border: 1px solid rgba(0, 212, 184, 0.3);
  color: var(--hc-accent-light);
}

.hc-accent-soft-bg {
  background: var(--hc-accent-soft);
}

.hc-muted {
  color: var(--hc-text-soft);
}