/* ==========================================================================
   Features — Design tokens (scoped dark theme)
   ==========================================================================
   The scoped `--feat-*` palette for every product Feature page. Same deep-ink
   family as the homepage narrative (violet = the raw conversation signal,
   mint = the value the coach produces from it).

   This is NOT the brand source of truth — brand primitives live once in
   src/shared/styles/global.css (`--brand-*`). Brand-core colours are
   referenced from there; the feature-specific brights stay local on purpose.

   Loaded FIRST on every Feature page, before PageStyles.css.
   ========================================================================== */

.features-page {
  /* Surfaces — deep ink, same family as the homepage narrative */
  --feat-bg: #090518;
  --feat-surface: rgba(17, 18, 43, 0.78);
  --feat-surface-strong: rgba(20, 21, 51, 0.94);
  --feat-surface-2: rgba(255, 255, 255, 0.03);
  --feat-line: rgba(176, 173, 224, 0.16);
  --feat-line-strong: rgba(255, 255, 255, 0.16);
  --feat-border-hover: rgba(139, 107, 255, 0.45);

  /* Ink / text */
  --feat-ink: #ffffff;
  --feat-text: #f8f7ff;
  --feat-body: #c4c1dd;
  --feat-muted: #a19ebe;

  /* The two voices of the system: violet carries the conversation signal,
     mint carries produced value; rose flags coaching corrections.
     The carrying voices also ship as rgb triples, because glows, washes
     and rings need them at an alpha — `rgba(var(--feat-violet-rgb), 0.3)`
     keeps those tints tied to the token instead of restating the hex. */
  --feat-violet: #7c3cff;
  --feat-violet-rgb: 124, 60, 255;
  --feat-violet-soft: #a990ff;
  --feat-blue: #5a74ff;
  --feat-blue-rgb: 90, 116, 255;
  --feat-mint: #19ce88;
  --feat-mint-rgb: 25, 206, 136;
  --feat-rose: #ff5c85;

  /* The machine's voice (mono annotations); humans speak in --font-sans. */
  --feat-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Section heading scale — Coaching is the family reference. Pages may
     change measures and line breaks for their copy, never these sizes. */
  --feat-title-section-size: clamp(3.15rem, 5.7vw, 5.6rem);
  --feat-title-section-size-mobile: clamp(2.8rem, 13.5vw, 4rem);
  --feat-title-story-size: clamp(3.15rem, 5.7vw, 5.6rem);
  --feat-title-story-size-mobile: clamp(2.8rem, 13.5vw, 4rem);
  --feat-title-deck-size: clamp(3.05rem, 5.25vw, 5.25rem);
  --feat-title-deck-size-mobile: clamp(2.15rem, 7.6vw, 3.4rem);
  --feat-title-manifesto-size: clamp(3.1rem, 8.2vw, 7rem);
  --feat-title-manifesto-size-mobile: clamp(2.7rem, 13vw, 3.9rem);
  --feat-title-supporting-size: clamp(2.45rem, 5vw, 4.8rem);
  --feat-title-related-size-mobile: clamp(2.25rem, 10vw, 3.2rem);
  --feat-title-cta-size: clamp(1.65rem, 3vw, 2.35rem);

  /* Radii / shadows */
  --feat-radius: 20px;
  --feat-radius-sm: 14px;
  --feat-radius-pill: 999px;
  --feat-card-shadow: 0 18px 46px rgba(2, 6, 23, 0.45);
}

/* Page ink lives on the shell, never on the body: the shared overlays
   (modals, liquid-glass button) are body-level siblings of #app.
   Invariant guarded by tests/unit/page-ink-scope.test.js. */
.features-page #app {
  color: var(--feat-body);
}