/* ============================================================
   MeterCall sitewide polish — typography, spacing, shadows
   Loaded AFTER each page's inline <style>, so selectors here
   override only what we explicitly touch. Non-color-destructive.
   ============================================================ */

/* ---------- Font smoothing + kerning ---------- */
html { -webkit-text-size-adjust: 100%; }
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}

/* ---------- Typography rhythm (non-destructive, no color) ---------- */
.polish h1,
.polish-h1 {
  font-family: 'Inter', -apple-system, system-ui, sans-serif;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
}
.polish h2,
.polish-h2 {
  font-family: 'Inter', -apple-system, system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.polish h3,
.polish-h3 {
  font-family: 'Inter', -apple-system, system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.polish h4 {
  font-family: 'Inter', -apple-system, system-ui, sans-serif;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.005em;
}
.polish p,
.polish li {
  line-height: 1.55;
  letter-spacing: 0;
}

/* Opt-in base stack for pages that want the upgraded stack */
.polish-body {
  font-family: -apple-system, 'SF Pro Text', 'Inter', system-ui, sans-serif !important;
}

/* ---------- 8px grid spacing helpers ---------- */
.polish-section { padding: 80px 24px; }
.polish-section-sm { padding: 48px 24px; }
.polish-card { padding: 28px; border-radius: 12px; }
.polish-card-sm { padding: 20px; border-radius: 10px; }

/* ---------- Shadow tokens (light/cream context) ---------- */
.polish-shadow-sm { box-shadow: 0 2px 8px rgba(26,39,64,0.04), 0 1px 2px rgba(26,39,64,0.06); }
.polish-shadow-md { box-shadow: 0 8px 24px rgba(26,39,64,0.08), 0 2px 6px rgba(26,39,64,0.04); }
.polish-shadow-lg { box-shadow: 0 16px 48px rgba(26,39,64,0.10), 0 4px 12px rgba(26,39,64,0.05); }

/* ---------- Shadow tokens (dark context) ---------- */
.polish-shadow-dark-sm { box-shadow: 0 2px 8px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.25); }
.polish-shadow-dark-md { box-shadow: 0 8px 24px rgba(0,0,0,0.45), 0 2px 6px rgba(0,0,0,0.30); }

/* ---------- Button polish (applies to any .btn, button, [role=button]) ---------- */
.polish-btn,
.polish .btn,
.polish button.primary,
.polish a.primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'Inter', -apple-system, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.005em;
  padding: 12px 24px;
  border-radius: 10px;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  transition: transform 150ms cubic-bezier(0.32, 0.72, 0, 1),
              box-shadow 150ms cubic-bezier(0.32, 0.72, 0, 1),
              filter 150ms cubic-bezier(0.32, 0.72, 0, 1);
  will-change: transform;
}
.polish-btn.primary,
.polish-btn-primary {
  background: linear-gradient(90deg, #ff7a1a, #ff3d8a);
  color: #fff;
  box-shadow: 0 4px 12px rgba(255,61,138,0.25), 0 1px 2px rgba(255,122,26,0.18);
}
.polish-btn.primary:hover,
.polish-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(255,61,138,0.32), 0 2px 4px rgba(255,122,26,0.22);
  filter: brightness(1.04);
}
.polish-btn.secondary,
.polish-btn-secondary {
  background: #fdfcf7;
  color: #1a2740;
  border: 1px solid #e8e1ce;
  box-shadow: 0 1px 2px rgba(26,39,64,0.04);
}
.polish-btn.secondary:hover,
.polish-btn-secondary:hover {
  transform: translateY(-1px);
  background: #fffdf6;
  box-shadow: 0 4px 10px rgba(26,39,64,0.08);
}

/* Universal hover lift for anything opted in */
.polish-lift { transition: transform 150ms cubic-bezier(0.32, 0.72, 0, 1),
                            box-shadow 150ms cubic-bezier(0.32, 0.72, 0, 1); }
.polish-lift:hover { transform: translateY(-2px); }

/* ---------- Hero glow (for pages with .hero or .polish-hero) ---------- */
.polish-hero-glow {
  position: relative;
}
.polish-hero-glow::before {
  content: '';
  position: absolute;
  top: -15%;
  left: 50%;
  transform: translateX(-50%);
  width: min(900px, 95vw);
  height: 500px;
  background: radial-gradient(ellipse at center,
    rgba(255,122,26,0.18) 0%,
    rgba(255,61,138,0.10) 35%,
    transparent 70%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}
.polish-hero-glow > * { position: relative; z-index: 1; }

/* ---------- Responsive: mobile scale-down ---------- */
@media (max-width: 768px) {
  .polish-section { padding: 48px 20px; }
  .polish-section-sm { padding: 32px 20px; }
  .polish-card { padding: 20px; }
  .polish h1,
  .polish-h1 { font-size: clamp(36px, 9vw, 52px) !important; }
  .polish h2,
  .polish-h2 { font-size: clamp(26px, 6vw, 34px) !important; }
  .polish h3,
  .polish-h3 { font-size: clamp(20px, 4.5vw, 24px) !important; }

  /* Force 2-col grids to single col on mobile where opted in */
  .polish-grid-2,
  .polish-grid-3,
  .polish-grid-4 { grid-template-columns: 1fr !important; gap: 16px !important; }

  /* Buttons get a hair bigger tap target */
  .polish-btn { padding: 14px 22px; font-size: 15px; }
}

/* ---------- Focus ring for a11y (non-destructive) ---------- */
.polish a:focus-visible,
.polish button:focus-visible,
.polish .btn:focus-visible,
.polish-btn:focus-visible {
  outline: 2px solid #ff7a1a;
  outline-offset: 3px;
  border-radius: 10px;
}

/* ---------- Reduce motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .polish-btn,
  .polish-lift,
  .polish .btn { transition: none !important; }
  .polish-btn:hover,
  .polish-lift:hover { transform: none !important; }
}