/* Alternative personal brand: vivid violet, lemon and warm white.
   The existing component colour tokens are shared across every page. */
:root {
  --ink: #2b2144;
  --paper: #fffdf7;
  --cobalt: #683bd2;
  --brand-blue: var(--cobalt);
  --teal: var(--cobalt);
  --accent: #e6f36b;
  --blue-wash: #efe8ff;
  --tint-blue: #f4f7d5;
  --muted: #625c72;
  --line: rgba(43,33,68,.18);
}

/* One expressive pairing, repeated consistently rather than new section colours. */
.hero > div > .eyebrow { color: var(--cobalt); }
.visual-note { background: var(--accent); }
.credential-strip { background: var(--cobalt); }
.credential > span { color: var(--accent); }
.approach { background: var(--tint-blue); }
.story { background: var(--blue-wash); }
.work { background: var(--paper); }
.section-label > span { border-color: rgba(104,59,210,.3); }
.story .section-label.light, .story .section-label.light > span,
.timeline, .timeline-item { border-color: rgba(104,59,210,.24); }
.story-research { border-color: rgba(104,59,210,.24); }
.keynote-band { background: var(--accent); color: var(--ink); }
.keynote-band h2 em { color: var(--cobalt); }
.keynote-band .light-button { background: var(--cobalt); color: white; }
.keynote-band .light-button:hover { background: var(--ink); }
.keynote-band a:focus-visible { outline-color: var(--ink); }
.footer { background: var(--cobalt); color: white; }
.footer .eyebrow { color: var(--accent); }
.footer > a { border-bottom-color: rgba(255,255,255,.75); }
.footer-bottom { color: #f3edff; border-top-color: rgba(255,255,255,.3); }
.footer a:hover { color: var(--accent); }
.footer a:focus-visible { outline-color: var(--accent); }
/* Unicorn Memo reuses the approved energetic blue/warm-yellow palette. Scoped
   to the project section, so the personal brand remains violet/lemon. */
.founder {
  --ink: #172e58;
  --cobalt: #2453e3;
  --brand-blue: var(--cobalt);
  --teal: var(--cobalt);
  --accent: #ffcc45;
  --muted: #53617a;
  --line: rgba(23,46,88,.18);
  background: var(--brand-cream);
  border-color: rgba(39,106,232,.16);
}
.founder .founder-mark img { box-shadow: 0 24px 56px rgba(40,91,212,.16); }
.founder-pricing { border-left-color: var(--cobalt); }
.founder .button.primary:hover { background: var(--ink); color: white; }