/* =========================================================================
   Clo Bare Money Coach: funnel brand ("Pink Ledger")
   Her real world (hot pink, plum-black, white, Oswald + Montserrat, the
   pink bear) elevated: blush-white canvas, one hot-pink accent, plum-black
   ink, aqua used only as a tiny spark on dark surfaces.
   Shared by every funnel / specimen page. Page-specific CSS lives beside
   each page; tokens live here only.
   ========================================================================= */

@font-face { font-family: "Oswald"; src: url("fonts/oswald-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Oswald"; src: url("fonts/oswald-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Oswald"; src: url("fonts/oswald-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("fonts/montserrat-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("fonts/montserrat-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("fonts/montserrat-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("fonts/montserrat-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* canvas */
  --bg: #FFF8FB;            /* blush white */
  --bg-2: #FCEFF5;          /* deeper blush for alternating zones (fade, never hard edge) */
  --surface: #FFFFFF;
  --plum: #1A1020;          /* plum-black: dark zones, footer banner */
  --plum-2: #26182E;
  /* text */
  --ink: #1A1020;
  --muted: #5E5363;
  --on-plum: #F7EEF4;
  --on-plum-2: #C9BCCB;
  --hair: rgba(26, 16, 32, 0.12);
  --hair-soft: rgba(26, 16, 32, 0.07);
  /* accent */
  --accent: #D1006F;        /* hot pink, white text passes 5.3:1 */
  --accent-hot: #FF0099;    /* her exact brand pink: graphics only, never body text on light */
  --accent-soft: #FFD6EA;
  --accent-on-dark: #FF4FA8;/* pink text on plum, 6.1:1 */
  --accent-ink: #FFFFFF;
  --spark: #2DE2D2;         /* aqua: tiny accents on plum only */
  /* type */
  --display: "Oswald", "Arial Narrow", Impact, sans-serif;
  --sans: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* system */
  --radius: 18px;
  --radius-sm: 12px;
  --gutter: clamp(20px, 5vw, 40px);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --shadow: 0 24px 60px -28px rgba(26, 16, 32, 0.28);
  --shadow-sm: 0 10px 30px -16px rgba(26, 16, 32, 0.22);
}

html { -webkit-text-size-adjust: 100%; }
body { margin: 0; display: flex; flex-direction: column; font-family: var(--sans); color: var(--ink); background: var(--bg); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
.page { flex: 1 1 auto; min-width: 0; }
::selection { background: var(--accent); color: var(--accent-ink); }

/* -------------------------------- Lockup -------------------------------- */
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.brand__mark { width: 44px; height: 44px; border-radius: 10px; display: block; }
.brand__word { font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--on-plum); white-space: nowrap; line-height: 1; font-size: 1rem; }
.brand__word b { color: var(--accent-on-dark); font-weight: 600; }

/* -------------------------------- Footer (branding-only banner, 1.5x the lockup height) -------------------------------- */
.brandfoot { display: flex; align-items: center; justify-content: center; height: 66px; background: var(--plum); padding: 0 var(--gutter); }

/* --------------------------- Reduced motion ----------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ---- mobile hardening (references/mobile.md) ---- */
img, svg, video, canvas, iframe { max-width: 100%; height: auto; }
p, li, td, th, blockquote, figcaption,
h1, h2, h3, h4, h5, h6 { overflow-wrap: anywhere; }