/*
 * Stillpoint — VeloCMS theme (slug: "stillpoint")
 * 1:1 port of the founder's Claude-Design canvas "Stillpoint Theme.dc.html".
 *
 * "Clinical calm for practitioners of care" — therapists, nutritionists,
 * yoga teachers, coaches, doctors, vets.
 * Palette: bone #F1EFEA · sage #8A9A87 · slate #3E4A52 · clay #C08A6A · ink #232A2E
 * Display: Literata · Body: Public Sans
 *
 * All values below are copied verbatim from the design's inline styles and the
 * "Engineering notes · theme stillpoint" implementation spec (color tokens,
 * spacing/radius scale, hover table, entrance motion, mobile-drawer spec).
 * No rounding, no reinterpretation.
 *
 * Scoped to [data-theme="stillpoint"] (NOT main-scoped) so /shop and
 * /products/* resolve the same tokens. P-094 token bridge at the bottom.
 */

/* ═══════════════════ COLOR TOKENS (engineering notes) ═══════════════════ */
[data-theme="stillpoint"] {
  /* canonical */
  --sp-bg: #F1EFEA;             /* oklch(0.949 0.008 96)  bone */
  --sp-ink: #232A2E;            /* oklch(0.263 0.014 227) ink — text */
  --sp-slate: #3E4A52;          /* oklch(0.394 0.021 232) slate — primary */
  --sp-clay: #C08A6A;           /* oklch(0.678 0.077 55)  clay — accent */

  /* supporting */
  --sp-sage: #8A9A87;           /* oklch(0.669 0.033 145) decor only (dots, dividers) */
  --sp-sage-deep: #566853;      /* oklch(0.492 0.041 145) sage-as-text — 4.7:1 on bone */
  --sp-sage-tint: #E4E8E1;      /* oklch(0.925 0.010 140) band bg */
  --sp-clay-ink: #8F5E3B;       /* oklch(0.507 0.078 55)  clay-as-text — 4.7:1 on bone */
  --sp-card: #FAF9F5;
  --sp-line: #DBD7CC;
  --sp-muted: #5C6660;
  --sp-slate-hover: #232A2E;    /* primary button hover target (background 180ms) */

  /* fonts (registered — getThemeFontVars("stillpoint")) */
  --sp-heading-font: var(--font-literata), "Iowan Old Style",
    "Palatino Linotype", Georgia, serif;
  --sp-body-font: var(--font-public-sans), -apple-system, "Segoe UI",
    system-ui, sans-serif;
  --sp-mono-font: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* layout scale (engineering notes: container 1280 shell · 1080 page · 720 prose) */
  --sp-container: 1280px;
  --sp-gutter: 40px;
  --sp-gutter-mobile: 20px;
  --sp-prose: 720px;

  /* engine palette bridge (--velo-*) — kept for any shared surface that reads
     these tokens. NB: the mobile drawer is now the BESPOKE StillpointMobileMenu
     (P-103 via useMobileDrawer), styled directly from --sp-* tokens, not the
     shared ThemeMobileMenu. */
  --velo-bg: var(--sp-bg);
  --velo-fg: var(--sp-ink);
  --velo-border: var(--sp-line);
  --velo-accent: var(--sp-slate);
}

/* Body font inheritance for the whole theme surface */
[data-theme="stillpoint"] {
  font-family: var(--sp-body-font);
  color: var(--sp-ink);
  background: var(--sp-bg);
}

/* ═══════════════════ MOTION — entrances only (verbatim from source) ═══════════════════ */
@keyframes sp-rise {
  from { transform: translateY(14px); }
  to   { transform: translateY(0); }
}
@keyframes sp-rise-s {
  from { transform: translateY(8px); }
  to   { transform: translateY(0); }
}

/* NB: opacity is never animated — SSR content is fully visible on first frame
   (P-068). Animations mutate transform only, applied on load (no IO gate). */
[data-theme="stillpoint"] .sp-anim-copy {
  animation: sp-rise 560ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
[data-theme="stillpoint"] .sp-anim-media {
  animation: sp-rise 560ms cubic-bezier(0.22, 1, 0.36, 1) 100ms both;
}
[data-theme="stillpoint"] .sp-anim-card {
  animation: sp-rise-s 480ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  [data-theme="stillpoint"] * {
    animation: none !important;
    transition-duration: 0ms !important;
  }
}

/* ═══════════════════ CHROME — sticky header ═══════════════════ */
[data-theme="stillpoint"] .sp-header {
  background: var(--sp-bg);
  border-bottom: 1px solid var(--sp-line);
  position: sticky;
  top: 0;
  z-index: 60; /* engineering notes: sticky header 60 · scrim 80 · drawer 90 */
}
[data-theme="stillpoint"] .sp-nav-inner {
  max-width: var(--sp-container);
  margin: 0 auto;
  padding: 0 var(--sp-gutter);
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
[data-theme="stillpoint"] .sp-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--sp-ink);
}
[data-theme="stillpoint"] .sp-brand-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--sp-sage);
  display: inline-block;
  flex-shrink: 0;
}
[data-theme="stillpoint"] .sp-brand-name {
  font-family: var(--sp-heading-font);
  font-size: 21px;
  font-weight: 500;
  letter-spacing: 0.005em;
}
[data-theme="stillpoint"] .sp-nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
}
[data-theme="stillpoint"] .sp-nav-link {
  font-size: 14px;
  font-weight: 500;
  color: var(--sp-muted);
  text-decoration: none;
  transition: color 160ms ease-out;
}
[data-theme="stillpoint"] .sp-nav-link:hover {
  color: var(--sp-ink);
}
[data-theme="stillpoint"] .sp-nav-link.is-active {
  font-weight: 600;
  color: var(--sp-ink);
  border-bottom: 2px solid var(--sp-sage);
  padding-bottom: 2px;
}
[data-theme="stillpoint"] .sp-nav-right {
  display: flex;
  align-items: center;
  gap: 18px;
}
/* bespoke mobile hamburger — hidden at ≥lg, shown < lg (mirrors the shared
   drawer's lg:hidden). The design's mobile header shows brand + cart +
   hamburger only; the CTA + account pill collapse into the drawer footer. */
[data-theme="stillpoint"] .sp-hamburger {
  display: none;
  background: none;
  border: none;
  padding: 6px;
  color: var(--sp-ink);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
[data-theme="stillpoint"] .sp-cart-link {
  position: relative;
  color: var(--sp-ink);
  display: inline-flex;
  padding: 4px;
}
[data-theme="stillpoint"] .sp-cart-badge {
  position: absolute;
  inset-block-start: -4px;
  inset-inline-end: -6px;
  background: var(--sp-clay);
  color: var(--sp-ink);
  font-size: 10px;
  font-weight: 700;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
[data-theme="stillpoint"] .sp-account-pill {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--sp-line);
  background: var(--sp-card);
  color: var(--sp-ink);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* ═══════════════════ BUTTONS / CTAs (hover table verbatim) ═══════════════════ */
[data-theme="stillpoint"] .sp-cta-primary {
  background: var(--sp-slate);
  color: var(--sp-bg);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  padding: 11px 22px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  transition: background 180ms ease-out;
}
[data-theme="stillpoint"] .sp-cta-primary:hover {
  background: var(--sp-slate-hover);
}
/* larger hero/section variant (padding 15px 30px, 15px) */
[data-theme="stillpoint"] .sp-cta-primary-lg {
  background: var(--sp-slate);
  color: var(--sp-bg);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  padding: 15px 30px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  text-align: center;
  display: block;
  transition: background 180ms ease-out;
}
[data-theme="stillpoint"] .sp-cta-primary-lg:hover {
  background: var(--sp-slate-hover);
}
/* full-width mobile / product-detail variant (padding 16px 0) */
[data-theme="stillpoint"] .sp-cta-primary-block {
  background: var(--sp-slate);
  color: var(--sp-bg);
  font-size: 15.5px;
  font-weight: 600;
  text-decoration: none;
  padding: 16px 0;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  text-align: center;
  display: block;
  width: 100%;
  transition: background 180ms ease-out;
}
[data-theme="stillpoint"] .sp-cta-primary-block:hover {
  background: var(--sp-slate-hover);
}
/* outline (Add to cart) — border transparent → rgba(62,74,82,0.08) 180ms */
[data-theme="stillpoint"] .sp-cta-outline {
  border: 1.5px solid var(--sp-slate);
  color: var(--sp-slate);
  font-size: 15.5px;
  font-weight: 600;
  text-decoration: none;
  padding: 15px 0;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  text-align: center;
  display: block;
  width: 100%;
  transition: background 180ms ease-out;
}
[data-theme="stillpoint"] .sp-cta-outline:hover {
  background: rgba(62, 74, 82, 0.08);
}
/* subscribe (footer) — border color 180ms + bg rgba(138,154,135,0.12) */
[data-theme="stillpoint"] .sp-cta-subscribe {
  align-self: flex-start;
  border: 1px solid #566853;
  color: var(--sp-bg);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  padding: 10px 20px;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  transition: border-color 180ms ease-out, background 180ms ease-out;
}
[data-theme="stillpoint"] .sp-cta-subscribe:hover {
  border-color: var(--sp-sage);
  background: rgba(138, 154, 135, 0.12);
}
/* clay text link — color #8F5E3B → #232A2E, 160ms */
[data-theme="stillpoint"] .sp-link-clay {
  font-size: 15px;
  font-weight: 500;
  color: var(--sp-clay-ink);
  text-decoration: none;
  transition: color 160ms ease-out;
}
[data-theme="stillpoint"] .sp-link-clay:hover {
  color: var(--sp-ink);
}
[data-theme="stillpoint"] .sp-link-clay-sm {
  font-size: 14px;
  font-weight: 500;
  color: var(--sp-clay-ink);
  text-decoration: none;
  transition: color 160ms ease-out;
}
[data-theme="stillpoint"] .sp-link-clay-sm:hover {
  color: var(--sp-ink);
}
[data-theme="stillpoint"] .sp-link-clay-bold {
  font-size: 14px;
  font-weight: 600;
  color: var(--sp-clay-ink);
  text-decoration: none;
  transition: color 160ms ease-out;
}
[data-theme="stillpoint"] .sp-link-clay-bold:hover {
  color: var(--sp-ink);
}

/* ═══════════════════ FOCUS (all) ═══════════════════ */
[data-theme="stillpoint"] a:focus-visible,
[data-theme="stillpoint"] button:focus-visible,
[data-theme="stillpoint"] input:focus-visible,
[data-theme="stillpoint"] textarea:focus-visible {
  outline: 2px solid var(--sp-slate);
  outline-offset: 2px;
}

/* ═══════════════════ CARDS (journal / shop) ═══════════════════ */
[data-theme="stillpoint"] .sp-card {
  display: block;
  background: var(--sp-card);
  border: 1px solid var(--sp-line);
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  color: var(--sp-ink);
  transition: border-color 200ms ease-out, transform 200ms ease-out;
}
[data-theme="stillpoint"] .sp-card:hover {
  border-color: var(--sp-sage);
  transform: translateY(-3px);
}
/* shop cards — border + translateY(-4px) + box-shadow, 220ms */
[data-theme="stillpoint"] .sp-shop-card {
  display: block;
  background: var(--sp-card);
  border: 1px solid var(--sp-line);
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  color: var(--sp-ink);
  transition: border-color 220ms ease-out, transform 220ms ease-out,
    box-shadow 220ms ease-out;
}
[data-theme="stillpoint"] .sp-shop-card:hover {
  border-color: var(--sp-sage);
  transform: translateY(-4px);
  box-shadow: 0 16px 40px -16px rgba(62, 74, 82, 0.28);
}
[data-theme="stillpoint"] .sp-card-title {
  font-family: var(--sp-heading-font);
  font-weight: 500;
}
[data-theme="stillpoint"] .sp-card-img {
  display: block;
  width: 100%;
  object-fit: cover;
}

/* ═══════════════════ CATEGORY PILLS (Journal filter row) ═══════════════════ */
[data-theme="stillpoint"] .sp-pill {
  font-size: 13px;
  font-weight: 500;
  color: var(--sp-ink);
  border: 1px solid var(--sp-line);
  text-decoration: none;
  padding: 8px 18px;
  border-radius: 999px;
  white-space: nowrap;
  background: transparent;
  transition: border-color 180ms ease-out, background 180ms ease-out;
}
[data-theme="stillpoint"] .sp-pill:hover {
  border-color: var(--sp-sage);
  background: var(--sp-card);
}
[data-theme="stillpoint"] .sp-pill.is-active {
  background: var(--sp-slate);
  color: var(--sp-bg);
  border: 1px solid var(--sp-slate);
  font-weight: 600;
}
[data-theme="stillpoint"] .sp-pill-scroll {
  overflow-x: auto;
}

/* ═══════════════════ CREDENTIAL / SESSIONS STRIP ═══════════════════ */
[data-theme="stillpoint"] .sp-credential {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--sp-sage-deep);
}
[data-theme="stillpoint"] .sp-session-card {
  background: var(--sp-bg);
  border: 1px solid var(--sp-line);
  border-radius: 10px;
  padding: 30px 30px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ═══════════════════ PAGINATION ═══════════════════ */
[data-theme="stillpoint"] .sp-page-btn {
  min-width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--sp-line);
  border-radius: 6px;
  color: var(--sp-ink);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  transition: border-color 180ms ease-out;
}
[data-theme="stillpoint"] .sp-page-btn:hover {
  border-color: var(--sp-sage);
}
[data-theme="stillpoint"] .sp-page-btn.is-current {
  background: var(--sp-slate);
  color: var(--sp-bg);
  border-color: var(--sp-slate);
  font-weight: 600;
}
[data-theme="stillpoint"] .sp-page-next {
  height: 38px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--sp-line);
  border-radius: 6px;
  color: var(--sp-ink);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  transition: border-color 180ms ease-out;
}
[data-theme="stillpoint"] .sp-page-next:hover {
  border-color: var(--sp-sage);
}

/* ═══════════════════ PROSE (post / page body) ═══════════════════ */
[data-theme="stillpoint"] .sp-prose {
  font-size: 18px;
  line-height: 1.78;
  max-width: 65ch;
  color: var(--sp-ink);
}
[data-theme="stillpoint"] .sp-prose p {
  margin: 0 0 24px;
}
[data-theme="stillpoint"] .sp-prose h2 {
  font-family: var(--sp-heading-font);
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.25;
  margin: 44px 0 16px;
}
[data-theme="stillpoint"] .sp-prose h3 {
  font-family: var(--sp-heading-font);
  font-size: 23px;
  font-weight: 500;
  margin: 36px 0 14px;
}
[data-theme="stillpoint"] .sp-prose blockquote {
  margin: 32px 0;
  padding-block: 4px;
  padding-inline-start: 24px;
  border-inline-start: 3px solid var(--sp-clay);
  font-family: var(--sp-heading-font);
  font-style: italic;
  font-size: 22px;
  line-height: 1.5;
  color: var(--sp-ink);
}
[data-theme="stillpoint"] .sp-prose ol,
[data-theme="stillpoint"] .sp-prose ul {
  margin: 0 0 24px;
  padding-inline-start: 24px;
}
[data-theme="stillpoint"] .sp-prose li {
  margin-bottom: 10px;
  line-height: 1.7;
}
[data-theme="stillpoint"] .sp-prose pre {
  font-family: var(--sp-mono-font);
  font-size: 13.5px;
  line-height: 1.65;
  background: #E9E7DF;
  border: 1px solid var(--sp-line);
  border-radius: 8px;
  padding: 18px 20px;
  overflow-x: auto;
  margin: 0 0 24px;
}
[data-theme="stillpoint"] .sp-prose figure {
  margin: 36px 0;
}
[data-theme="stillpoint"] .sp-prose figcaption {
  font-size: 13.5px;
  color: var(--sp-muted);
  margin-top: 10px;
  line-height: 1.5;
}
[data-theme="stillpoint"] .sp-prose img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}
[data-theme="stillpoint"] .sp-prose a {
  color: var(--sp-clay-ink);
}

/* ═══════════════════ FOOTER ═══════════════════ */
[data-theme="stillpoint"] .sp-footer {
  background: var(--sp-ink);
  color: var(--sp-bg);
}
[data-theme="stillpoint"] .sp-footer-name {
  font-family: var(--sp-heading-font);
  font-weight: 500;
}
[data-theme="stillpoint"] .sp-footer-heading {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sp-sage);
}
[data-theme="stillpoint"] .sp-footer-link {
  font-size: 14px;
  color: #A9B0AB;
  text-decoration: none;
  transition: color 160ms ease-out;
}
[data-theme="stillpoint"] .sp-footer-link:hover {
  color: var(--sp-bg);
}

/* ═══════════════════ INPUTS (subscribe) ═══════════════════ */
[data-theme="stillpoint"] .sp-input {
  background: var(--sp-bg);
  border: 1px solid var(--sp-line);
  color: var(--sp-ink);
  font-family: var(--sp-body-font);
  font-size: 14px;
  padding: 12px 14px;
  border-radius: 6px;
  outline: none;
}
[data-theme="stillpoint"] .sp-input::placeholder {
  color: var(--sp-muted);
}

/* ═══════════════════ RESPONSIVE (mobile 390) ═══════════════════ */
/* Desktop nav + right-side collapse below lg (1024px); the bespoke
   StillpointMobileMenu hamburger (.sp-hamburger) shows < lg. Mirror the
   design's mobile 390. */
@media (max-width: 1023px) {
  [data-theme="stillpoint"] .sp-nav-links {
    display: none;
  }
  [data-theme="stillpoint"] .sp-nav-inner {
    height: 64px;
    padding: 0 var(--sp-gutter-mobile);
  }
  /* mobile header: brand + cart + hamburger only (design 5 · mobile 390).
     The "Book a session" CTA + account pill move into the drawer footer. */
  [data-theme="stillpoint"] .sp-hamburger {
    display: inline-flex;
  }
  [data-theme="stillpoint"] .sp-nav-right .sp-cta-primary,
  [data-theme="stillpoint"] .sp-nav-right .sp-account-pill {
    display: none;
  }
  [data-theme="stillpoint"] .sp-nav-right {
    gap: 16px;
  }
  /* About page 2-col (prose + credentials aside) collapses to 1 col */
  [data-theme="stillpoint"] .sp-page-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    padding: 44px 20px 64px !important;
  }
  [data-theme="stillpoint"] .sp-hero-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    padding: 52px 20px 48px !important;
  }
  [data-theme="stillpoint"] .sp-journal-grid,
  [data-theme="stillpoint"] .sp-blog-grid,
  [data-theme="stillpoint"] .sp-sessions-grid {
    grid-template-columns: 1fr !important;
  }
  [data-theme="stillpoint"] .sp-shop-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
  }
  /* shop mobile 390 (design 5 · lines 1111-1113): tighter container padding
     + smaller masthead h1 (46px → 30px) */
  [data-theme="stillpoint"] .sp-shop-main {
    padding: 44px 20px 64px !important;
  }
  [data-theme="stillpoint"] .sp-shop-h1 {
    font-size: 30px !important;
    line-height: 1.22 !important;
  }
  [data-theme="stillpoint"] .sp-product-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  [data-theme="stillpoint"] .sp-footer-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* wide strips never overflow the document (P-140) */
[data-theme="stillpoint"] .sp-strip-scroll {
  overflow-x: clip;
}

/* ═══════════════════ RTL ═══════════════════ */
/* tracking breaks connected Arabic script — zero it on labels under rtl */
[dir="rtl"] [data-theme="stillpoint"] .sp-cta-primary,
[dir="rtl"] [data-theme="stillpoint"] .sp-cta-primary-lg,
[dir="rtl"] [data-theme="stillpoint"] .sp-cta-primary-block,
[dir="rtl"] [data-theme="stillpoint"] .sp-cta-outline,
[dir="rtl"] [data-theme="stillpoint"] .sp-cta-subscribe,
[dir="rtl"] [data-theme="stillpoint"] .sp-pill,
[dir="rtl"] [data-theme="stillpoint"] .sp-page-next,
[dir="rtl"] [data-theme="stillpoint"] .sp-footer-heading {
  letter-spacing: 0;
}

/*
 * ═══════════════════ P-094 TOKEN BRIDGE ═══════════════════
 * The commerce archetype + shared components consume the universal
 * --vb-color-* vocabulary. Map Stillpoint palette → --vb-color-* at the
 * global [data-theme="stillpoint"] scope (NOT main-scoped) so /shop and
 * /products/* resolve. No currentColor, no circular refs.
 *
 * Contrast (engineering notes): bone-on-slate 7.6:1 · bone-on-ink 12.6:1 —
 * both AA at any size.
 */
[data-theme="stillpoint"] {
  --vb-color-primary: #3E4A52;      /* slate — CTA fill */
  --vb-color-primary-fg: #F1EFEA;   /* bone label on slate — 7.6:1 */
  --vb-color-bg: #F1EFEA;           /* bone */
  --vb-color-fg: #232A2E;           /* ink — 12.6:1 on bone */
  --vb-color-accent: #C08A6A;       /* clay */
}