/* Page 1 — Color layer
 * Loaded AFTER page1.css. Introduces measured color variety using ONLY
 * palette tokens already declared in tokens.css. Nothing new is invented.
 *
 * Idea: each section carries a single accent (--sec), rotating through a
 * curated four-hue set — coral, slate-blue, emerald, amber — all sharing
 * the warm-navy temperature. The accent paints the *chrome* only:
 * section eyebrows, list numbers, underlines, quote rules, bullets.
 * Headlines and body prose stay cream for readability.
 * Primary buttons move from plain cream to a coral fill.
 */

/* ── Per-section accent assignment ─────────────────────────────── */
body { --sec: var(--accent); }

#section-a { --sec: var(--accent);  }   /* coral      */
#section-b { --sec: var(--accent);  }   /* coral      */
#section-c { --sec: var(--info);    }   /* slate-blue */
#section-d { --sec: var(--success); }   /* emerald    */
#section-e { --sec: var(--warning); }   /* amber      */
#section-f { --sec: var(--info);    }   /* slate-blue */
#section-g { --sec: var(--success); }   /* emerald    */
#section-h { --sec: var(--warning); }   /* amber      */
#section-i { --sec: var(--info);    }   /* slate-blue */
#section-j { --sec: var(--accent);  }   /* coral      */

/* ── Section eyebrow — colored label + leading dot ─────────────── */
.section-eyebrow {
  color: var(--sec);
  display: flex;
  align-items: center;
  gap: 12px;
}
.section-eyebrow::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sec);
}

/* ── Numbered markers across the page take the section accent ──── */
.arc-no,
.dim-no,
.conv-no,
.question-no,
.commit-label {
  color: var(--sec);
}

/* ── Underlines / accent rules follow the section hue ──────────── */
.coral-line {
  background-image: linear-gradient(var(--sec), var(--sec));
}

.definition {
  border-left-color: var(--sec);
  border-left-width: 2px;
}

/* Pull-out quote — gains a colored left rule */
.pull-out {
  padding-left: 28px;
  border-left: 2px solid var(--sec);
}

/* Honest-clarity bullets pick up the section accent */
.honest-item::before {
  color: var(--sec);
  opacity: 0.9;
}

/* FAQ question marker — a small colored tick before each question */
.faq-q {
  position: relative;
  padding-left: 20px;
}
.faq-q::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--sec);
}

/* ── Buttons — coral fill instead of plain cream ───────────────── */
.mp-cta-primary {
  background: var(--accent);
  color: #fff8f5;
  transition: background .4s var(--ease-soft);
}
.mp-cta-primary:hover {
  opacity: 1;
  background: color-mix(in oklab, var(--accent) 88%, #000);
}

/* Secondary link underline follows the section accent and grows on hover */
.mp-cta-secondary {
  border-bottom-color: transparent;
  background-image: linear-gradient(var(--sec), var(--sec));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  transition: color .35s var(--ease-soft),
              background-size .4s var(--ease-soft);
}
.mp-cta-secondary:hover {
  background-size: 100% 2px;
}

/* ── Cover (section A) ─────────────────────────────────────────── */
/* Warm the top eyebrow and give the subtitle a coral cast so the
   cover reads colorful without touching the serif headline. */
.cover-top .mp-eyebrow {
  color: var(--accent);
}

.cover-subtitle {
  color: var(--accent);
}

/* ── Nav handbook link arrow tinted ────────────────────────────── */
.mp-nav-link span { color: var(--accent); opacity: 1; }