/* No Small Ambition · design tokens + interactive states
   Source of truth: BUILD-MANIFEST.md sections 3–5. Hex values are the Figma paint styles verbatim. */

:root {
  /* Brand */
  --plum-500: #9A5280;   /* Plum/500 · light accent */
  --plum-600: #74305C;   /* Plum / 600 · primary accent, buttons, links */
  --plum-700: #65294F;   /* Plum / 700 · button hover */
  --plum-800: #562345;   /* Plum / 800 · footer bg, pressed, hard shadow */
  --plum-tint: #F6EDF2;  /* Plum / Tint · hero bands, cards, selected fills */

  /* Neutrals */
  --ink: #241E28;        /* headings */
  --body: #4A4350;       /* body text */
  --muted: #6E6774;      /* captions, secondary */
  --line: #E6DDE3;       /* borders, dividers, tracks */
  --cream: #FBF9FA;      /* alt section background */
  --white: #FFFFFF;

  /* Utility */
  --scrim: rgba(23, 18, 26, 0.55);      /* Utility / Scrim 55 · modal + menu backdrop */
  --ring: rgba(116, 48, 92, 0.18);      /* focus ring, 3px spread of plum-600 */

  /* Diagram accents (used only inside the research diagram SVG) */
  --accent-teal: #227681;   /* Accent / Accent 1 */
  --accent-grey: #625D61;   /* Accent / Accent 2 */
  --accent-amber: #B37C31;  /* Accent / Amber */
  --accent-orchid: #9B5D88; /* Accent / Accent 4 */

  /* Spacing (rem, rides the fluid root) */
  --space-2xs: 0.5rem;   /* 8 */
  --space-xs: 0.75rem;   /* 12 */
  --space-s: 1rem;       /* 16 */
  --space-m: 1.5rem;     /* 24 */
  --space-l: 2rem;       /* 32 */
  --space-xl: 2.5rem;    /* 40 */
  --space-2xl: 3rem;     /* 48 */
  --space-3xl: 4.5rem;   /* 72 */
  --space-4xl: 6rem;     /* 96 */
  --gutter: 1.5rem;                       /* page side padding, mobile */
  --section-pad: clamp(2.5rem, 6vw, 6rem); /* vertical section rhythm */

  /* Radii */
  --radius-s: 0.625rem;  /* 10 · inputs, options */
  --radius-m: 0.75rem;   /* 12 · notes */
  --radius-l: 1rem;      /* 16 · cards */
  --radius-xl: 1.25rem;  /* 20 · modals, big cards */
  --radius-pill: 999px;  /* buttons */

  /* Layout */
  --container: 70rem;    /* 1120 content width at 1440 */

  /* Fluid heading clamps (fluid.mjs clamp, 390 → 1440) */
  /* 38px @390 → 56px @1440 */
  --text-display: clamp(2.375rem, 1.957142857142857rem + 1.7142857142857144vw, 3.5rem);
  /* 28px @390 → 44px @1440 */
  --text-h1: clamp(1.75rem, 1.3785714285714286rem + 1.5238095238095237vw, 2.75rem);
  /* 28px @390 → 40px @1440 */
  --text-h2: clamp(1.75rem, 1.4714285714285715rem + 1.1428571428571428vw, 2.5rem);
  /* 20px @390 → 24px @1440 */
  --text-h3: clamp(1.25rem, 1.157142857142857rem + 0.38095238095238093vw, 1.5rem);

  /* Static type tokens (rem, ride the fluid root) */
  --text-card-title: 1.1875rem;    /* 19 */
  --text-sheet-title: 1.375rem;    /* 22 · sheet headings */
  --text-serif-italic-l: 1.25rem;  /* 20 */
  --text-serif-italic: 1.0625rem;  /* 17 · steps 0.9375 / 0.875rem where Figma uses 15 / 14 */
  --text-body-lead: 1.125rem;      /* 18 */
  --text-body: 1rem;               /* 16 */
  --text-body-s: 0.9375rem;        /* 15 */
  --text-body-xs: 0.875rem;        /* 14 */
  --text-caption: 0.8125rem;       /* 13 */
  --text-micro: 0.75rem;           /* 12 */
  --text-eyebrow: 0.75rem;         /* 12 · 13 desktop, below */
  --text-button: 0.9375rem;        /* 15 */
  --text-button-s: 0.875rem;       /* 14 · nav CTA */
  --text-nav: 0.875rem;            /* 14 */
  --text-question: 0.9375rem;      /* 15 · 16 desktop, below */
  --text-menu-link: 1.625rem;      /* 26 */
  --text-wordmark: 1.0625rem;      /* 17 · survey header 0.9375rem */
  --text-counter: 3rem;            /* 48 */
}

@media (min-width: 768px) {
  :root {
    --text-question: 1rem;       /* 16 from the desktop survey card layout up */
  }
}
@media (min-width: 992px) {
  :root {
    --text-eyebrow: 0.8125rem;   /* 13 desktop */
  }
}

/* ---- Typography classes (class system, manifest section 5) ----
   Applied via Bricks global classes of the same name; the class objects in
   Bricks carry no settings — these rules are the single source of truth. */

.heading-style-display, .heading-style-h1, .heading-style-h2,
.heading-style-h3, .heading-style-card {
  font-family: Fraunces, serif;
  font-weight: 600;
  color: var(--ink);
}
.heading-style-display { font-size: var(--text-display); line-height: 1.15; }
/* The display title fills its 50% hero column almost exactly on large screens,
   so sub-pixel/scrollbar/font-load variance can tip it onto a second line.
   Keep it on one line where the hero is side-by-side (>=992px); below that the
   hero stacks full-width and natural wrapping stays safe on small phones. */
@media (min-width: 992px) {
  .heading-style-display { white-space: nowrap; }
}
.heading-style-h1 { font-size: var(--text-h1); line-height: 1.23; }
.heading-style-h2 { font-size: var(--text-h2); line-height: 1.25; }
.heading-style-h3 { font-size: var(--text-h3); line-height: 1.33; }
.heading-style-card { font-size: var(--text-card-title); line-height: 1.32; }

.text-style-lead, .text-style-body, .text-style-small,
.text-style-caption, .text-style-micro {
  font-family: Inter, sans-serif;
  font-weight: 400;
  color: var(--body);
}
.text-style-lead { font-size: var(--text-body-lead); line-height: 1.65; }
.text-style-body { font-size: var(--text-body); line-height: 1.6; }
.text-style-small { font-size: var(--text-body-s); line-height: 1.6; }
.text-style-caption { font-size: var(--text-caption); line-height: 1.5; color: var(--muted); }
.text-style-micro { font-size: var(--text-micro); line-height: 1.45; color: var(--muted); }
.text-style-eyebrow {
  font: 600 var(--text-eyebrow)/1.35 Inter, sans-serif;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--plum-600);
}
.text-style-serif-italic {
  font: italic 400 var(--text-serif-italic)/1.5 Fraunces, serif;
  color: var(--plum-600);
}
.text-style-serif-italic-l {
  font: italic 400 var(--text-serif-italic-l)/1.5 Fraunces, serif;
  color: var(--plum-600);
}

/* ---- Component classes (cards, notes, quote, timeline, counters) ---- */

.card {
  background: var(--white);
  border-radius: var(--radius-l);
  padding: var(--space-m);
}
.card--tint { background: var(--plum-tint); }
.card--outline {
  background: var(--cream);
  border: 1px solid var(--line);
}

.note {
  background: var(--plum-tint);
  border-radius: var(--radius-m);
  padding: var(--space-s) var(--space-m);
}
.note__title {
  font: 600 var(--text-caption)/1.5 Inter, sans-serif;
  letter-spacing: 0.08em;
  color: var(--plum-600);
  margin: 0 0 0.25rem;
}
.note__body {
  font-size: var(--text-caption);
  line-height: 1.5;
  margin: 0;
}

.quote {
  position: relative;
  padding-left: var(--space-l);
  font: italic 400 var(--text-serif-italic)/1.5 Fraunces, serif;
  color: var(--plum-600);
}
.quote::before {
  content: "\201C";
  position: absolute;
  left: 0;
  top: -0.35em;
  font: 600 2.75rem/1 Fraunces, serif;
  color: var(--plum-600);
}

.counter-card {
  background: var(--plum-tint);
  border-radius: var(--radius-l);
  padding: var(--space-l);
  text-align: center;
}
.counter-card__number {
  font: 600 var(--text-counter)/1.12 Fraunces, serif;
  color: var(--plum-600);
}

.construct-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  padding: var(--space-s) var(--space-m);
}
.construct-card__number {
  font: 600 1rem/1.12 Fraunces, serif;
  color: var(--plum-600);
}

/* Timeline: vertical rail on mobile, horizontal row on desktop */
.timeline {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}
.timeline__step {
  position: relative;
  padding-left: var(--space-m);
}
.timeline__step::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: var(--plum-600);
}
.timeline__step::after {
  content: "";
  position: absolute;
  left: 0.28rem;
  top: 1.35em;
  bottom: calc(-1 * var(--space-m));
  width: 1.5px;
  background: var(--line);
}
.timeline__step:last-child::after { display: none; }
@media (min-width: 992px) {
  .timeline { flex-direction: row; gap: var(--space-l); }
  .timeline__step {
    flex: 1 1 0;
    padding-left: 0;
    padding-top: var(--space-m);
  }
  .timeline__step::before { top: 0; left: 0; }
  .timeline__step::after {
    left: 1.25rem;
    right: calc(-1 * var(--space-l));
    top: 0.28rem;
    bottom: auto;
    width: auto;
    height: 1.5px;
  }
}

/* Page side gutter: sections keep full-bleed backgrounds while their content
   gets breathing room. Element-level padding (id-scoped) overrides this. */
.brxe-section {
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* Screen-reader-only utility (used for the research diagram long description) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---- Interactive states (values read off the Figma components) ---- */

/* Buttons: 3D raise and squish */
.btn {
  background: var(--plum-600); color: var(--white);
  border-radius: var(--radius-pill);
  padding: 0.9375rem 1.75rem;
  font: 600 var(--text-button)/1.3 Inter, sans-serif;
  transition: transform 150ms cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 150ms cubic-bezier(0.34, 1.56, 0.64, 1),
              background-color 150ms ease-out;
}
.btn:hover {
  background: var(--plum-500);
  transform: translateY(-3px);
  box-shadow: 0 5px 0 0 var(--plum-800);
}
.btn:active {
  background: var(--plum-800);
  transform: translateY(2px);
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.28);
}
/* On-brand keyboard focus ring. Uses outline (not box-shadow) so it composes
   with the hover 3D shadow instead of overwriting it. Without this the button
   falls back to the browser default ring, which reads as a stray white border
   on the dark plum fill. */
.btn:focus-visible {
  outline: 2px solid var(--plum-600);
  outline-offset: 2px;
}
.btn:disabled, .btn.is-disabled {
  background: var(--line); color: var(--muted);
  transform: none; box-shadow: none;
}
.btn--secondary {
  background: var(--white); color: var(--plum-600);
  border: 1.5px solid var(--plum-600);
}
.btn--secondary:hover { background: var(--white); }
.btn--secondary:active { border-color: var(--plum-800); color: var(--plum-800); }
.btn--small { padding: 0.625rem 1.25rem; font-size: var(--text-button-s); }

@media (prefers-reduced-motion: reduce) {
  .btn, .btn:hover, .btn:active { transform: none; transition: background-color 150ms ease-out; }
}

/* Inputs */
.input, .select, .option {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-s);
}
.input:hover, .select:hover, .option:hover, .likert__cell:hover {
  border-color: var(--plum-600);
}
.input:focus-visible, .select:focus-visible {
  outline: none;
  border: 1.5px solid var(--plum-600);
  box-shadow: 0 0 0 3px var(--ring);
}
.option.is-selected { background: var(--plum-tint); border: 1.5px solid var(--plum-600); }
.likert__cell.is-selected { background: var(--plum-600); color: var(--white); }
.likert__cell:hover:not(.is-selected) { background: var(--plum-tint); color: var(--plum-600); }

/* Nav links */
.nav-link { color: var(--body); }
.nav-link:hover { color: var(--plum-600); }
.nav-link[aria-current="page"] { color: var(--plum-600); text-decoration: underline; text-underline-offset: 0.25em; }