/* ============================================================
   BASE — light element resets & helpful brand utilities.
   Kept minimal; tokens do the heavy lifting.
   ============================================================ */

*,
*::before,
*::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--text-strong);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

p { margin: 0; }

a {
  color: var(--text-link);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

/* --- Brand utility classes --- */

/* Wide tracked caps eyebrow, like "MOBILE MASSAGE INC" */
.cmm-eyebrow {
  font-family: var(--font-eyebrow);
  font-weight: var(--weight-bold);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent);
}

/* Frosted-glass panel — the brand's signature surface */
.cmm-glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-glass), var(--shadow-inset);
}

/* Solid soft card */
.cmm-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

/* Lake gradient — navy → royal, for hero/brand fills */
.cmm-gradient-brand {
  background: linear-gradient(135deg, var(--blue-900) 0%, var(--blue-700) 55%, var(--blue-500) 100%);
}
/* Sky tint wash for soft sections */
.cmm-gradient-sky {
  background: linear-gradient(180deg, var(--blue-50) 0%, var(--surface-page) 100%);
}