/* ==========================================================================
   Rensora Design System — opt-in brand utilities

   The design system's own base.css also restyles bare elements (body, h1–h4,
   p, a, :focus-visible). Those rules are deliberately NOT included here: the
   approved page designs set their own type, colour and spacing, and element
   rules from this file would override them. Only class-based utilities live
   here, so nothing changes unless markup uses one of these classes.
   ========================================================================== */
.rs-display {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
}
.rs-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--action);
}
.rs-label {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}
.rs-mono { font-family: var(--font-mono); }
.rs-muted { color: var(--text-muted); }

/* Light-first canvases with one directional ray */
.rs-canvas { background: var(--surface-page); }
.rs-canvas--alt { background: var(--surface-alt); }
.rs-canvas--ray { background: var(--wash-enterprise), var(--surface-page); }
.rs-canvas--spotlight { background: var(--surface-inverse); color: var(--text-inverse); }

/* A single decorative, low-opacity light ray */
.rs-ray { position: absolute; inset: 0; pointer-events: none; background: var(--ray-blue); }