/* ============================================================
   RANGELIGHT — Base element & utility layer
   Resting state is always warm. Teal only as glow on interaction.
   ============================================================ */

body {
  background: var(--rl-smoke);
  color: var(--rl-bone);
  font-family: var(--rl-font-body);
  font-size: var(--rl-fs-base);
  line-height: var(--rl-lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--rl-font-display);
  font-weight: var(--rl-fw-medium);
  color: var(--rl-bone);
  line-height: var(--rl-lh-tight);
  letter-spacing: var(--rl-track-tight);
  margin: 0;
}
h1 { font-size: var(--rl-fs-3xl); }
h2 { font-size: var(--rl-fs-2xl); }
h3 { font-size: var(--rl-fs-xl); line-height: var(--rl-lh-snug); }
h4 { font-size: var(--rl-fs-lg); line-height: var(--rl-lh-snug); }

p { margin: 0 0 1em; max-width: var(--rl-maxw-prose); }

a { color: var(--rl-amber); text-decoration: none; transition: color var(--rl-dur) var(--rl-ease); }
a:hover { color: var(--rl-amber-soft); }

/* ---- the logotype lockup (placeholder face: Jost) ---- */
.rl-logotype {
  font-family: var(--rl-font-logo);
  font-weight: var(--rl-fw-light);
  letter-spacing: var(--rl-track-logo);
  text-transform: uppercase;
  color: var(--rl-bone);
}

/* ---- overline / eyebrow ---- */
.rl-overline {
  font-family: var(--rl-font-display);
  font-size: var(--rl-fs-sm);
  font-weight: var(--rl-fw-medium);
  letter-spacing: var(--rl-track-over);
  text-transform: uppercase;
  color: var(--rl-amber);
}

/* ============================================================
   CITATION CHIP — the hero detail. Warm at rest, teal glow on hover.
   ============================================================ */
.rl-cite {
  display: inline-flex;
  align-items: center;
  gap: var(--rl-space-2);
  font-family: var(--rl-font-mono);
  font-size: var(--rl-fs-sm);
  color: var(--rl-amber);
  background: var(--surface-cite);
  border: 1px solid rgba(245,165,35,.27);
  border-radius: var(--rl-radius-pill);
  padding: 5px 12px;
  cursor: pointer;
  transition: box-shadow var(--rl-dur) var(--rl-ease),
              border-color var(--rl-dur) var(--rl-ease),
              color var(--rl-dur) var(--rl-ease);
}
.rl-cite:hover,
.rl-cite:focus-visible {
  outline: none;
  color: var(--rl-amber-soft);
  border-color: rgba(111,196,210,.55);
  box-shadow: var(--rl-glow-teal);   /* TEAL LAW: glow only on interaction */
}

/* ============================================================
   PRIMARY CTA — warm gradient fill, teal halo on hover.
   ============================================================ */
.rl-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rl-space-2);
  background: var(--rl-grad-warm);
  color: var(--rl-amber-ink);
  font-family: var(--rl-font-display);
  font-weight: var(--rl-fw-semibold);
  font-size: var(--rl-fs-base);
  border: 0;
  border-radius: var(--rl-radius);
  padding: 14px 30px;
  box-shadow: none;
  cursor: pointer;
  transition: box-shadow var(--rl-dur) var(--rl-ease),
              transform var(--rl-dur-fast) var(--rl-ease),
              filter var(--rl-dur) var(--rl-ease);
}
.rl-cta:hover { box-shadow: var(--rl-glow-teal); filter: brightness(1.04); }
.rl-cta:active { transform: translateY(1px); }

/* ---- focus: teal halo, everywhere ---- */
:focus-visible { outline: none; box-shadow: var(--rl-glow-teal); }

/* ============================================================
   UTILITIES
   ============================================================ */
.rl-prose { max-width: var(--rl-maxw-prose); line-height: var(--rl-lh-loose); color: var(--rl-dim); }
.rl-prose strong { color: var(--rl-bone); font-weight: var(--rl-fw-semibold); }
.rl-mono { font-family: var(--rl-font-mono); }
.rl-card {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--rl-radius-lg);
  padding: var(--rl-space-6);
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}