/* ==========================================================================
   Gesuntech base + components — v1.0
   Requires tokens.css to be loaded first.
   ========================================================================== */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; height: auto; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  color: var(--color-heading);
  text-wrap: balance;
}
.gt-display { font-size: var(--text-display); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); }
h1, .gt-h1 { font-size: var(--text-h1); line-height: 1.1;  letter-spacing: -0.03em; }
h2, .gt-h2 { font-size: var(--text-h2); line-height: 1.15; letter-spacing: var(--tracking-heading); }
h3, .gt-h3 { font-size: var(--text-h3); line-height: 1.2;  letter-spacing: var(--tracking-heading); }
h4, .gt-h4 { font-size: var(--text-h4); line-height: 1.3;  letter-spacing: -0.01em; font-weight: var(--weight-medium); }

p { margin: 0; text-wrap: pretty; }
.gt-lead  { font-size: var(--text-lead); color: var(--color-text-muted); max-width: var(--measure); }
.gt-small { font-size: var(--text-small); color: var(--color-text-subtle); }
.gt-eyebrow {
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-accent-text);
}

/* ---------- Layout ---------- */
.gt-container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.gt-container--narrow { max-width: calc(var(--container-narrow) + 2 * var(--gutter)); }
.gt-section { padding-block: var(--section-y); }
.gt-section--soft    { background: var(--color-surface-soft); }
.gt-section--warm    { background: var(--color-surface-warm); }
.gt-section--inverse { background: var(--color-surface-inverse); color: var(--color-text-inverse); }
.gt-section--inverse :is(h1, h2, h3, h4) { color: var(--color-text-inverse); }
.gt-section--inverse .gt-lead { color: var(--color-text-inverse-muted); }
.gt-divider { border: 0; border-top: 1px solid var(--color-border); margin: 0; }

/* ---------- Links ---------- */
a { color: var(--color-link); text-underline-offset: 5px; text-decoration-thickness: 1px; transition: color var(--dur-fast) ease; }
a:hover { color: var(--color-primary-hover); text-decoration-thickness: 2px; }
.gt-section--inverse a:not(.gt-btn) { color: var(--color-text-inverse-muted); }
.gt-section--inverse a:not(.gt-btn):hover { color: var(--color-text-inverse); }

/* ---------- Focus (never remove) ---------- */
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: 2px; }

/* ---------- Buttons ---------- */
.gt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 52px; padding: 0 1.625rem;
  border: 1px solid transparent; border-radius: var(--radius-md);
  font-family: var(--font-body); font-size: var(--text-body); font-weight: var(--weight-medium); line-height: 1;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.gt-btn--sm { min-height: 44px; padding: 0 1.25rem; font-size: 0.9375rem; }
.gt-btn--primary   { background: var(--color-primary); color: var(--color-on-primary); }
.gt-btn--primary:hover { background: var(--color-primary-hover); color: var(--color-on-primary); }
.gt-btn--secondary { background: var(--gt-soft-green); color: var(--gt-deep-teal); }
.gt-btn--secondary:hover { background: #C6DEC2; color: var(--gt-deep-teal); }
.gt-btn--outline   { background: transparent; border-color: var(--gt-deep-teal); color: var(--gt-deep-teal); }
.gt-btn--outline:hover { background: var(--gt-deep-teal); color: var(--gt-warm-white); }
.gt-btn--on-dark   { background: var(--gt-warm-white); color: var(--gt-deep-teal); }
.gt-btn--on-dark:hover { background: var(--gt-soft-green); color: var(--gt-deep-teal); }
.gt-btn svg { width: 16px; height: 16px; flex: none; }

/* ---------- Badges ---------- */
.gt-badge {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 30px; padding: 0 0.75rem; border-radius: var(--radius-pill);
  background: var(--gt-sand); color: var(--gt-charcoal);
  font-size: var(--text-small); font-weight: var(--weight-medium); line-height: 1;
}
.gt-badge--green { background: var(--gt-soft-green); color: var(--gt-deep-teal); }
.gt-badge__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* ---------- Cards ---------- */
.gt-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.gt-card--warm { background: var(--gt-sand); border-color: transparent; }
.gt-card--soft { background: var(--gt-soft-green); border-color: transparent; }
a.gt-card { display: block; color: inherit; text-decoration: none; transition: border-color var(--dur-fast) ease; }
a.gt-card:hover { border-color: var(--gt-teal-mist); }

/* ---------- Forms ---------- */
.gt-field { display: grid; gap: var(--space-2); }
.gt-label { font-size: var(--text-small); font-weight: var(--weight-medium); color: var(--color-text); }
.gt-input, .gt-textarea, .gt-select {
  width: 100%; min-height: 48px; padding: 0.75rem 0.875rem;
  background: var(--color-surface); color: var(--color-text);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
  font: inherit; font-size: var(--text-body);
  transition: border-color var(--dur-fast) ease;
}
.gt-textarea { min-height: 140px; resize: vertical; }
.gt-input:hover, .gt-textarea:hover, .gt-select:hover { border-color: var(--gt-muted); }
.gt-input:focus-visible, .gt-textarea:focus-visible, .gt-select:focus-visible { outline-offset: 0; border-color: var(--gt-teal-mist); }
.gt-input[aria-invalid="true"], .gt-textarea[aria-invalid="true"] { border-color: var(--gt-clay-ink); }
.gt-error { font-size: var(--text-small); color: var(--color-alert-text); }
.gt-hint  { font-size: var(--text-small); color: var(--color-text-subtle); }

/* ---------- Header ---------- */
.gt-header { position: sticky; top: 0; z-index: 50; background: transparent; transition: background-color var(--dur-base) ease, box-shadow var(--dur-base) ease; }
.gt-header.is-scrolled { background: var(--color-bg); box-shadow: 0 1px 0 var(--color-border), var(--shadow-sm); }

/* ---------- Signature leaf shape (use once or twice per page) ---------- */
.gt-leaf { border-radius: var(--radius-leaf); overflow: hidden; }

/* ---------- Scroll reveal ----------
   Add class "js" to <html> from a script, then add .is-visible via IntersectionObserver.
   Without JS, content stays visible. */
.js .gt-reveal { opacity: 0; transform: translateY(14px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.js .gt-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .gt-reveal { opacity: 1; transform: none; } }

/* ---------- Utilities ---------- */
.gt-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }