/* Coldwater Logic — base element helpers + utility classes.
   Light touch: set page defaults and a few brand primitives used across
   cards, docs, and decks. Components carry their own styling inline. */

:root {
  color-scheme: light;
}

.cwl-root,
.cwl-body {
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- Type primitives ---- */
.cwl-display {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--text-strong);
  text-wrap: balance;
}
.cwl-h1 { font-weight: var(--fw-bold); font-size: var(--fs-h1); line-height: var(--lh-snug); letter-spacing: var(--ls-heading); color: var(--text-strong); text-wrap: balance; }
.cwl-h2 { font-weight: var(--fw-bold); font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: var(--ls-heading); color: var(--text-strong); text-wrap: balance; }
.cwl-h3 { font-weight: var(--fw-semibold); font-size: var(--fs-h3); line-height: var(--lh-snug); color: var(--text-strong); }
.cwl-lead { font-size: var(--fs-lead); line-height: var(--lh-relaxed); color: var(--text-muted); font-weight: var(--fw-regular); }
.cwl-body-text { font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--text-body); }
.cwl-small { font-size: var(--fs-small); color: var(--text-muted); }
.cwl-mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1; }

/* ---- Eyebrow: tracked all-caps label, the brand signature ---- */
.cwl-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* ---- Aqua accent rule (under section heads) ---- */
.cwl-accent-rule {
  width: 48px;
  height: var(--border-2);
  background: var(--accent);
  border: 0;
  margin: var(--space-3) 0;
}

/* ---- Directional motif: a small forward chevron used as a bullet/cue ---- */
.cwl-cue::before {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  margin-right: 0.6em;
  border-right: 2px solid var(--accent);
  border-top: 2px solid var(--accent);
  transform: rotate(45deg) translateY(0.05em);
}

*:focus-visible {
  outline: var(--ring-width) solid var(--ring-color);
  outline-offset: 2px;
}