/*
 * marketing_pages.css — shared design tokens + primitives for EZdoc's
 * public marketing pages (home, marketing_pages#* bespoke pages,
 * pages#recreate_pdf).
 *
 * Convention (same as seo_pages.css): layout/typography/sections/grids
 * are Tailwind utilities in the ERB; this file carries only the shared
 * brand tokens and the small primitives every marketing page reuses.
 * Page-specific styling stays in page-scoped <style> blocks
 * (.lp / .pg / .fm / .mp-*).
 *
 * Brand rules: .impeccable.md. Purple (#7c3aed) is a first-class
 * MARKETING accent alongside blue and gold — the product UI keeps the
 * calmer blue anchor. No gradient text, no cyan-on-dark, no sparkle
 * spam. Light, warm, editorial.
 */

:root {
  /* Brand triad (marketing only) */
  --mk-purple: #7c3aed;
  --mk-purple-deep: #6d28d9;
  --mk-purple-soft: #ede9fe;
  --mk-blue: #2563eb;
  --mk-blue-deep: #1d4ed8;
  --mk-blue-soft: #dbeafe;
  --mk-gold: #f59e0b;
  --mk-gold-deep: #d97706;
  --mk-gold-soft: #fef3c7;

  /* Neutrals */
  --mk-ink: #0c1730;
  --mk-body: #4b5563;
  --mk-faint: #6b7280;
  --mk-cream: #faf8f3;
  --mk-line: #e5e1d8;

  /* Type */
  --mk-serif: "Source Serif 4", Georgia, serif;
  --mk-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  --mk-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Eyebrow label — the small uppercase kicker above section headings. */
.mk-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--mk-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mk-faint);
}
.mk-eyebrow::before {
  content: "";
  width: 1.5rem;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}
.mk-eyebrow--purple { color: var(--mk-purple); }
.mk-eyebrow--blue { color: var(--mk-blue); }
.mk-eyebrow--gold { color: var(--mk-gold-deep); }

/* Serif-italic accent word inside headings (the home `em` idiom,
   promoted to a shared primitive). */
.mk-accent {
  font-family: var(--mk-serif);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.mk-accent--purple { color: var(--mk-purple); }
.mk-accent--blue { color: var(--mk-blue); }
.mk-accent--gold { color: var(--mk-gold-deep); }

/* Buttons */
.mk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.625rem;
  padding: 0.75rem 1.375rem;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: transform 0.15s var(--mk-ease), box-shadow 0.15s var(--mk-ease),
    background-color 0.15s var(--mk-ease), color 0.15s var(--mk-ease);
}
.mk-btn:active { transform: translateY(1px); }
.mk-btn--primary {
  background: var(--mk-blue);
  color: #fff;
  box-shadow: 0 1px 2px rgba(12, 23, 48, 0.12), 0 4px 14px -4px rgba(37, 99, 235, 0.4);
}
.mk-btn--primary:hover { background: var(--mk-blue-deep); }
.mk-btn--purple {
  background: var(--mk-purple);
  color: #fff;
  box-shadow: 0 1px 2px rgba(12, 23, 48, 0.12), 0 4px 14px -4px rgba(124, 58, 237, 0.4);
}
.mk-btn--purple:hover { background: var(--mk-purple-deep); }
.mk-btn--ghost {
  background: transparent;
  color: var(--mk-ink);
  box-shadow: inset 0 0 0 1px var(--mk-line);
}
.mk-btn--ghost:hover { box-shadow: inset 0 0 0 1px #d4cfc2; background: rgba(250, 248, 243, 0.7); }

/* Soft brand wash used behind heroes/spotlights. Apply per-page with the
   accent(s) that fit the section; keep alpha low (the anti-tell rule). */
.mk-wash {
  background:
    radial-gradient(ellipse 55% 45% at 12% 0%, rgba(124, 58, 237, 0.07), transparent 60%),
    radial-gradient(ellipse 50% 40% at 88% 8%, rgba(37, 99, 235, 0.07), transparent 60%),
    radial-gradient(ellipse 45% 40% at 50% 100%, rgba(245, 158, 11, 0.06), transparent 65%);
}

@media (prefers-reduced-motion: reduce) {
  .mk-btn { transition: none; }
}