/* Revel Media global stylesheet: the same on every client site. Don't edit per client; use client.css.
   Role tokens: kit styles read these, never raw palette names, so a client's look can be changed
   from client.css without touching any class style. Defaults map to ACSS contextual colours. */
:root {
  /* Surfaces */
  --rm-surface: var(--bg-ultra-light);          /* page and header background */
  --rm-surface-alt: var(--bg-light);            /* alternate light band */
  --rm-card: var(--white);                      /* cards, form card */
  --rm-dark: var(--bg-ultra-dark);              /* footer, top bar */
  --rm-dark-alt: var(--bg-dark);

  /* Text */
  --rm-ink: var(--text-dark);
  --rm-ink-muted: var(--text-dark-muted);
  --rm-on-dark: var(--white);
  --rm-on-dark-muted: var(--text-light-muted);

  /* Accent: eyebrows, labels, small highlights. Falls back to primary if secondary is off. */
  --rm-accent: var(--secondary, var(--primary));
  --rm-accent-strong: var(--secondary-semi-dark, var(--primary-dark));
  --rm-accent-soft: var(--secondary-semi-light, var(--primary-light));
  --rm-accent-gradient: linear-gradient(135deg, var(--rm-accent-soft), var(--rm-accent) 55%, var(--rm-accent-strong));

  /* Lines */
  --rm-line: color-mix(in srgb, var(--rm-ink) 14%, transparent);
  --rm-line-on-dark: color-mix(in srgb, var(--rm-on-dark) 14%, transparent);

  /* Logo */
  --rm-logo-height: 48px;
  --rm-logo-height-mobile: 40px;
}

/* Builder only: show ACSS On Visible end state in the Etch canvas (body.etch-canvas-body isn't exported) */
.etch-canvas-body :is([class*=on-visible--], [class*=on-visible-all--] > *) {
  opacity: 1;
  translate: none;
  scale: none;
  filter: none;
}