/* ============================================================
   GABE RENE LLC — BASE UTILITY CLASSES
   The reusable, division-aware classes from the brand sheet.
   Everything inherits var(--accent); drop a .div-* class on any
   wrapper to retheme to that division's lock color.
   ============================================================ */

/* ==== TYPE UTILITIES ==== */
.gr-headline {
  font-family: var(--f-headline);
  font-weight: var(--fw-headline);
  text-transform: uppercase;
  letter-spacing: var(--tracking-headline);
  line-height: var(--leading-tight);
}
.gr-sub      { font-family: var(--f-subhead); font-weight: 500; }
.gr-body     { font-family: var(--f-body); font-weight: 400; line-height: var(--leading-body); }
.gr-body-alt { font-family: var(--f-body-alt); font-weight: 300; line-height: var(--leading-body); }
.gr-hand     { font-family: var(--f-hand); }

/* ==== EYEBROW (mono label with accent tick) ==== */
.gr-eyebrow { display: flex; align-items: center; gap: 10px; }
.gr-eyebrow::before { content: ""; width: 18px; height: 2px; background: var(--accent); }
.gr-eyebrow span {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}

/* ==== BUTTONS ==== */
.gr-btn {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  background: var(--accent);
  color: var(--cream);
  padding: 11px 22px;
  border-radius: var(--radius-sm);
  border: none;
  text-decoration: none;
  cursor: pointer;
  transition: filter var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.gr-btn:hover  { filter: brightness(1.12); }
.gr-btn:active { transform: translateY(1px); }
.gr-btn--ghost {
  background: transparent;
  color: var(--accent);
  border: 1.5px solid var(--accent);
}
.gr-btn--ghost:hover { background: var(--accent); color: var(--cream); filter: none; }

/* ==== CARD ==== */
.gr-card {
  border: var(--border-hairline);
  border-radius: var(--radius);
  padding: 18px 20px;
  background: #fff;
}

/* ==== CALLOUT (hand-drawn wink — never body copy) ==== */
.gr-callout {
  font-family: var(--f-hand);
  color: var(--accent);
  font-size: 26px;
  line-height: 1.1;
}

/* ==== LOCK PILL (division signature tag) ==== */
.gr-lock-pill {
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  background: var(--accent);
  color: #fff;
  padding: 3px 8px;
  border-radius: 3px;
}