/* inpursuit.life — design tokens + shared components.
   Dark theme (near-black base + electric purple/teal) — see CLAUDE.md and
   favicon.svg, both already committed to this palette before this file was
   written.

   Provenance note (2026-07-18): the live Gamma prototype at inpursuit.life
   currently renders on a near-white body background (#f5f5f7/#ffffff),
   with a couple of full-bleed solid-accent sections and a mostly-blank
   layout below the hero (broken smart-layout content, not a usable source
   for a refined dark surface palette). Its --purple (#9b5de5) and --teal
   (#00F5D4) were verified pixel-exact against computed styles on the live
   site and kept unchanged. --bg/--surface/--ink/--muted/--edge keep this
   brief's starting dark values as-is: they match the already-committed
   design direction in CLAUDE.md ("near-black base #14151E, electric teal
   accent #00F5D4") and favicon.svg, which predate this task.

   Contrast fix round (2026-07-18): white-on-#9b5de5 measured 4.13:1, under
   AA's 4.5:1 for normal text — see task-2-report.md "Fix round 1" for the
   full relative-luminance math. --purple-deep (#7a3fc4, 6.30:1 vs --btn-ink)
   is now the resting .btn fill. Added --edge-soft (tokenizes the old
   one-off rgba(244,244,248,.12) card border). Added a body.light scope for
   reading-heavy pages, plus --focus (dark teal #0B7A6C, 4.80:1 vs the light
   bg) because plain --teal only measures 1.28:1 against #f5f5f7 — nowhere
   near the 3:1 a focus ring or skip-link chip needs. --focus-ink pairs with
   --focus so the skip-link label stays readable on both the dark-mode teal
   chip and the light-mode dark-teal chip. --accent generalizes the same
   swap (teal on dark → purple-deep on light) to every other
   teal-as-text-or-border-accent spot that sits on a --bg/--surface backdrop
   (nav active link, brand suffix, .btn--outline, footer link hover, quote
   rule/placeholder label) so nothing silently regresses to teal-on-white
   once body.light is applied.

   Fix round 2 (2026-07-18): round 1 moved the failing 4.13:1 ratio to
   .btn:hover (background: var(--purple), still white text) instead of
   fixing it — same ratio, relocated. --purple-hover (#8447cf) is now a
   dedicated hover-fill token (5.55:1 vs white / 5.06:1 vs --btn-ink); .btn
   never uses bare --purple for a fill carrying light text again. Also
   retired .btn's hardcoded `color: #fff` — but not to var(--ink): --ink
   flips dark under body.light while .btn's purple fills don't change per
   theme, so var(--ink) would put dark-on-purple text (2.66:1, fails) on a
   .btn inside body.light. --btn-ink is a theme-invariant near-white token
   instead, so .btn stays AA-passing in both themes. See task-2-report.md
   "Fix round 2" for the full math. */

:root {
  --bg: #14151E;        /* page background */
  --bg-rgb: 20, 21, 30; /* RGB for rgba() scrim overlays — mirrors #14151E */
  --surface: #232534;   /* cards/sections */
  --ink: #F4F4F8;        /* body text */
  --muted: #A6A8B8;      /* secondary text */
  --purple: #9b5de5;     /* brand accent 1 — verified against live Gamma export */
  --purple-deep: #7a3fc4; /* resting .btn fill — 6.30:1 vs --btn-ink, passes AA (see report) */
  --purple-hover: #8447cf; /* .btn hover fill — 5.55:1 vs white / 5.06:1 vs --btn-ink, passes AA (see report) */
  --btn-ink: #F4F4F8;    /* .btn label color — theme-invariant on purpose: .btn fills don't change under body.light, but --ink does, so var(--ink) would fail there (see report) */
  --teal: #00F5D4;       /* brand accent 2 — verified against live Gamma export; dark-mode focus/accent */
  --edge: #34364a;       /* borders */
  --edge-soft: rgba(244, 244, 248, .12); /* soft hairline for tinted-surface cards */
  --focus: var(--teal);       /* focus ring + skip-link chip; light mode overrides to a dark teal */
  --focus-ink: #08251f;       /* text/label color on top of --focus */
  --accent: var(--teal);      /* teal-as-text/border accent; light mode overrides to --purple-deep */
  --font: "Inter", -apple-system, "Segoe UI", sans-serif;
}

/* ---- light page variant (reading-heavy pages: body.light) ----
   --focus and --accent are re-pointed at purple-family/dark-teal shades
   because plain --teal fails 3:1 against this light bg (1.28:1 measured).
   See task-2-report.md "Fix round 1" for full contrast math. */
body.light {
  --bg: #f5f5f7;
  --surface: #ffffff;
  --ink: #1C1D26;
  --muted: #5A5C6B;
  --edge: #D9DAE3;
  --edge-soft: rgba(28, 29, 38, .12);
  --focus: #0B7A6C;      /* 4.80:1 vs #f5f5f7 — passes the 3:1 UI-component minimum */
  --focus-ink: #ffffff;  /* 5.23:1 vs --focus — dark-mode's #08251f only manages 3.10:1 here */
  --accent: var(--purple-deep); /* 5.78:1 vs #f5f5f7 as text/border, keeps buttons/accents in the purple family */
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-weight: 700; line-height: 1.25; }
h2, h4 { margin: 0 0 14px; }
h3 { margin: 24px 0 10px; }
p { margin: 0 0 14px; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* ---- a11y ----
   Contrast guards: body text is --ink on --bg/--surface only. --purple on
   --bg is for headings/large text only (verify >=3:1 in Task 9); --teal
   never carries body copy on light backgrounds. Gamma sections with solid
   #9b5de5 / #00F5D4 backgrounds use dark ink (#14151E) text. --focus /
   --focus-ink carry the dark-teal swap for body.light — see :root comment. */
.skip-link { position: absolute; left: -999px; top: 0; background: var(--focus); color: var(--focus-ink); padding: .6rem 1rem; z-index: 100; }
.skip-link:focus { left: 0; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } }

/* ---- header / nav ---- */
.site-header { background: var(--bg); border-bottom: 1px solid var(--edge); }
.site-header .wrap {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  padding-top: 20px; padding-bottom: 20px;
}
.brand {
  /* Task 9 a11y fix: axe/WCAG 1.4.3 flagged --purple at the previous 1.15rem
     (18.4px/13.8pt bold) as normal-size text, just under the 14pt/18.66px
     bold "large text" cutoff — failing 4.5:1 on both themes (measured 4.40:1
     on --bg #14151E, 3.78:1 on body.light --bg #f5f5f7; --purple only clears
     3:1). 1.25rem (20px) crosses the large-text threshold with margin, so
     the existing --purple token (unchanged, no new color) only needs 3:1,
     which both themes already clear. */
  font-weight: 700; font-size: 1.25rem; letter-spacing: .01em;
  color: var(--purple); text-decoration: none; margin-right: auto;
  display: inline-flex; align-items: center;
}
.brand-accent { color: var(--accent); }
.site-nav { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.site-nav a { text-decoration: none; font-size: .92rem; color: var(--muted); }
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--accent); font-weight: 600; }

/* ---- buttons ---- */
.btn {
  display: inline-block; text-decoration: none; font-weight: 600; font-size: .95rem;
  padding: 12px 26px; border-radius: 999px; margin: 0 12px 12px 0;
  background: var(--purple-deep); color: var(--btn-ink); border: 1.5px solid var(--purple-deep);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover { background: var(--purple-hover); border-color: var(--purple-hover); }
.btn--outline { background: transparent; color: var(--accent); border-color: var(--accent); }
.btn--outline:hover { background: var(--accent); color: var(--bg); }

mark { background: var(--purple-deep); color: var(--btn-ink); padding: 0 .25em; border-radius: 3px; }

/* ---- hero ---- */
.hero { padding: 96px 0 90px; }
.hero h1 { font-size: clamp(2rem, 5vw, 2.9rem); max-width: 760px; margin-bottom: 22px; }
.hero p { max-width: 620px; color: var(--muted); margin-bottom: 26px; font-size: 1.05rem; }
.hero .grid-2 { align-items: center; }

/* ---- hero media (photo background + scrim) ----
   For a hero that sits on a photo instead of a flat --bg fill: apply
   alongside .hero, set `style="background-image:url(...)"` per page (kept
   out of this rule so the class stays image-agnostic and reusable). The
   scrim's rgba mirrors --bg (#14151E = rgb(20,21,30)) rather than
   introducing a new hardcoded color, and is dark enough that --ink/--muted
   text keeps the same contrast ratios they already have against --bg. */
.hero-media { position: relative; background-size: cover; background-position: center; isolation: isolate; }
.hero-media::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(var(--bg-rgb), .80), rgba(var(--bg-rgb), .92));
}
.hero-icon img { display: block; margin: 0 auto; max-width: 180px; width: 100%; height: auto; }
.hero-subhead { color: var(--muted); font-weight: 600; font-size: 1.15rem; margin: 0 0 14px; }
@media (max-width: 640px) { .hero-icon img { max-width: 120px; } }

/* ---- sections ---- */
.section { padding: 84px 0; }
.section--tinted { background: var(--surface); }

/* ---- prose (narrow reading column for legal/reading-heavy pages) ----
   Constrains long-form body text to a comfortable measure (~72ch) instead
   of the full 1120px .wrap — used on privacy/legal copy where paragraphs
   otherwise run edge-to-edge. Nest inside .wrap: `.wrap .prose`. */
.prose { max-width: 72ch; margin: 0 auto; }
.prose h2 { margin-top: 40px; font-size: 1.3rem; }
.prose h2:first-of-type { margin-top: 0; }

/* ---- grids ---- */
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-uneven { grid-template-columns: 1fr 2fr; } /* narrow gallery column + wide photo column (home gym section) */
@media (max-width: 900px) { .grid-uneven { grid-template-columns: 1fr; } }

/* ---- cards ---- */
.card { background: var(--bg); border: 1px solid var(--edge); border-radius: 12px; padding: 28px 26px; }
.section--tinted .card { background: var(--surface); border-color: var(--edge-soft); }
.card h3, .card h4 { margin-top: 0; }
.card h3 { font-size: 1.15rem; margin-bottom: 10px; }
.card p { font-size: .95rem; color: var(--muted); }
.card h3, .card h4 { font-size: 1.05rem; margin-bottom: 10px; }

/* ---- solid feature cards ----
   Contrasts with the outline-style .card above (bordered, --bg/--surface
   fill) for a second visual tier — Gamma's "solidBoxes" smart-layout
   variant. Fill is --purple-deep (already the resting .btn color, verified
   6.30:1 vs --btn-ink — see the :root comment above) so no new hardcoded
   hex is introduced; text stays --btn-ink (theme-invariant) rather than
   --ink so it keeps passing AA if this card ever appears under body.light.

   Task 9 fix: selector bumped from `.card--solid` to `.card.card--solid`
   (0,2,0 specificity) so it reliably beats `.section--tinted .card` (also
   0,2,0 but earlier in source) whenever a solid card sits inside a tinted
   section — e.g. support/. Before this, the tinted-section rule's equal
   specificity + earlier declaration lost the cascade to source order, so
   `.card--solid` alone never won, silently falling back to --surface as the
   background. On body.light (support/) that meant --btn-ink (near-white)
   text on a --surface (white) card: ~1:1 contrast, invisible. */
.card.card--solid { background: var(--purple-deep); border-color: var(--purple-deep); }
.card--solid h3, .card--solid h4, .card--solid p { color: var(--btn-ink); }

/* ---- quotes / pull-quotes ----
   PLACEHOLDER RULE (mirrors nate-land-site): a <figure class="quote"> with
   class "placeholder" must be removed or replaced with a real attributed
   quote before DNS cutover. Never ships live. */
.quote { border-left: 3px solid var(--accent); padding: 6px 0 6px 22px; }
.quote blockquote { font-size: 1.1rem; line-height: 1.6; margin-bottom: 14px; }
.quote figcaption { font-size: .88rem; color: var(--muted); }
.quote.placeholder { position: relative; opacity: .75; }
.quote.placeholder::before {
  content: "placeholder — real quote before launch"; display: block;
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px;
}

/* ---- app screenshot + store badges ----
   Marketing guardrail: dark app screenshots never sit bare on the dark
   page — .shot gets an elevated card treatment (surface fill, hairline
   border, padding) framing the image itself. */
.shot {
  width: 100%; max-width: 320px; height: auto; display: block;
  background: var(--surface); border: 1px solid var(--edge);
  border-radius: 26px; padding: 14px;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6);
}
.badges { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.badges img { height: 44px; width: auto; display: block; }
.badges--center { justify-content: center; margin-top: 8px; }

/* ---- gallery (mixed phone shots + device photos) ---- */
.gallery { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.gallery .shot { max-width: 180px; }
.gallery-photo {
  width: 100%; height: auto; display: block; border-radius: 12px;
  border: 1px solid var(--edge);
}

/* ---- footer ---- */
.site-footer { background: var(--surface); border-top: 1px solid var(--edge); color: var(--ink); padding: 72px 0 36px; }
.site-footer h2 { font-size: clamp(1.5rem, 4vw, 2.1rem); margin-bottom: 16px; }
.site-footer .lede { color: var(--muted); max-width: 560px; margin-bottom: 28px; }
.footer-meta {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  border-top: 1px solid var(--edge); margin-top: 48px; padding-top: 22px;
  font-size: .85rem; color: var(--muted);
}
.footer-meta .name { font-weight: 700; color: var(--ink); margin-right: auto; }
.footer-meta a { color: var(--ink); text-decoration: none; }
.footer-meta a:hover { color: var(--accent); }
.copyright { margin-top: 20px; font-size: .78rem; color: var(--muted); }

@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .section { padding: 56px 0; }
  .hero { padding: 60px 0 52px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}