/* ─────────────────────────────────────────────────────────────────────────
   Atlas AI — design tokens (v2, Claude Design handoff)

   Shared CSS custom properties for every code component. Imported once per
   component so each bundle is self-contained in Webflow. Values mirror the
   `:root` block in index-base.html — keep them in sync; do not add new colors
   to the palette (see CLAUDE.md § "Things NOT to do").
   ───────────────────────────────────────────────────────────────────────── */
:host {
  /* Paper (backgrounds) */
  --paper:      #F4EFE5;
  --paper-alt:  #EBE4D4;
  --paper-deep: #DDD3BC;
  --paper-86:   rgba(245, 239, 229, 0.86);
  --paper-74:   rgba(245, 239, 229, 0.74);
  --paper-55:   rgba(245, 239, 229, 0.55);
  --paper-22:   rgba(245, 239, 229, 0.22);
  --paper-10:   rgba(245, 239, 229, 0.10);

  /* Ink (text) */
  --ink:    #1A1612;
  --ink-85: rgba(26, 22, 18, 0.86);
  --ink-70: rgba(26, 22, 18, 0.72);
  --ink-50: rgba(26, 22, 18, 0.5);
  --ink-30: rgba(26, 22, 18, 0.3);
  --ink-20: rgba(26, 22, 18, 0.18);
  --ink-14: rgba(26, 22, 18, 0.14);
  --ink-08: rgba(26, 22, 18, 0.08);

  /* Ochre (accent) */
  --ochre:       #8C6A3D;
  --ochre-light: #D9B98A;
  --ochre-soft:  rgba(140, 106, 61, 0.14);
  --gold:        #B89968;

  /* Type */
  --serif: "Source Serif 4", "Source Serif Pro", Georgia, serif;
  --sans:  "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Layout */
  --wrap-max:        1312px;
  --wrap-wide-max:   1440px;
  --wrap-narrow-max: 920px;
  --pad-x:           64px;
}

@media (max-width: 900px) {
  :host {
    --pad-x: 24px;
  }
}

/* Post body for the CMS template. The markup inside the wrap is authored in the
   CMS, so everything here is styled by element selector rather than class.

   Two paths:

   - Locally (plain React) the body is a direct child of the wrap, so the plain
     `.wf-article-body-wrap p` rules below drive the render.
   - In Webflow the body is projected content: it lives in the light DOM and is
     assigned to this component's <slot>, which plain descendant selectors
     cannot cross. As in Leadership.css and Footer.css, Webflow delivers that
     content inside a SINGLE wrapper node, so `::slotted(*)` — the wrapper — is
     the only handle shadow CSS gets. See the note above that rule for how the
     rest of the CMS markup is reached. */

.wf-article-body {
  box-sizing: border-box;
  font-family: var(--serif);
}

/* Light/dark variants. Beyond the section's own surface, each one publishes the
   palette the body reads: every colour below is one of these `--wf-article-body-*`
   values rather than a token, and so is its half of ArticleBody.slotted.ts.
   Selectors can't reach the CMS markup where Webflow puts it, but custom
   properties inherit through the flattened tree — from this section, through the
   wrap, into the assigned node and everything under it (same mechanism as the
   slotted cards in Solutions.css). So the body flips with the section, in both
   render paths, from this one place. */
.wf-article-body--light {
  background: var(--paper);
  color: var(--ink);

  --wf-article-body-copy: var(--ink-85);
  --wf-article-body-heading: var(--ink);
  --wf-article-body-link: var(--ink);
  --wf-article-body-quote: var(--ink-70);
  --wf-article-body-rule: var(--ink-20);
  --wf-article-body-caption: var(--ink-50);
  --wf-article-body-accent: var(--ochre);
}

.wf-article-body--dark {
  background: var(--ink);
  color: var(--paper);

  --wf-article-body-copy: var(--paper-86);
  --wf-article-body-heading: var(--paper);
  --wf-article-body-link: var(--paper);
  --wf-article-body-quote: var(--paper-74);
  --wf-article-body-rule: var(--paper-22);
  --wf-article-body-caption: var(--paper-55);
  /* The ochre goes light on ink, as on a dark Product / Solution eyebrow. */
  --wf-article-body-accent: var(--ochre-light);
}

.wf-article-body-wrap {
  box-sizing: border-box;
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 64px var(--pad-x) 96px;
}

/* Paragraph treatment lifted from ArticlePage's inline `paragraphStyle`. */
.wf-article-body-wrap p {
  margin: 0 0 24px;
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.7;
  color: var(--wf-article-body-copy);
}

/* Remaining rich-text elements, so CMS-authored headings, lists, quotes, and
   links stay inside the brand system instead of falling back to UA defaults. */
.wf-article-body-wrap h2,
.wf-article-body-wrap h3 {
  margin: 48px 0 16px;
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.4px;
  color: var(--wf-article-body-heading);
}

.wf-article-body-wrap h2 {
  font-size: 32px;
}

.wf-article-body-wrap h3 {
  font-size: 24px;
}

.wf-article-body-wrap ul,
.wf-article-body-wrap ol {
  margin: 0 0 24px;
  padding-left: 24px;
}

.wf-article-body-wrap li {
  margin-bottom: 10px;
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.7;
  color: var(--wf-article-body-copy);
}

.wf-article-body-wrap blockquote {
  margin: 40px 0;
  padding-left: 24px;
  border-left: 1px solid var(--wf-article-body-rule);
  font-style: italic;
  font-size: 22px;
  line-height: 1.5;
  color: var(--wf-article-body-quote);
}

.wf-article-body-wrap a {
  color: var(--wf-article-body-link);
  text-decoration: none;
  border-bottom: 1px solid var(--wf-article-body-accent);
}

.wf-article-body-wrap img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 40px 0;
}

.wf-article-body-wrap > *:last-child {
  margin-bottom: 0;
}

/* ─── Webflow: the slotted body ───────────────────────────────────
   Everything the CMS markup can INHERIT goes here, on the slot wrapper: family,
   size, leading, colour cascade down from the wrapper into the paragraphs and
   list items inside it. This is the whole of what shadow CSS can do — verified
   in a Webflow publish, `::slotted(*)` lands and `::slotted(p)` does not,
   because `::slotted()` matches only the top-level assigned node and Webflow
   assigns a single wrapper. No selector may descend from it either
   (`::slotted(*) p` is not valid CSS).

   The non-inherited half — margins, the h2/h3 sizes, the blockquote rule, link
   underlines — is applied from a document-level stylesheet scoped to this
   component's host element, injected by `useLightDomStyles` (rules in
   ArticleBody.slotted.ts). Those two files carry the same values as the element
   rules above; change them together.

   The `:not()`s keep the rule off the before/after slots, which sit in the same
   wrap and would otherwise pick up the body's type — including into a dropped
   component's shadow root, since font and colour inherit through a host
   element. The `i` flag is there because Webflow names a slot after its prop
   key and attribute values match case-sensitively.

   Locally there is no slot, so this matches nothing and the rules above apply
   directly. */
.wf-article-body-wrap
  ::slotted(:not([slot="beforeContent" i]):not([slot="afterContent" i])) {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.7;
  color: var(--wf-article-body-copy);
}

/* ─── Mobile ≤ 900px ──────────────────────────────────────────── */
@media (max-width: 900px) {
  .wf-article-body-wrap {
    padding: 48px var(--pad-x) 64px;
  }
  .wf-article-body-wrap p,
  .wf-article-body-wrap li {
    font-size: 17px;
  }
  .wf-article-body-wrap h2 {
    font-size: 26px;
  }
  .wf-article-body-wrap h3 {
    font-size: 21px;
  }

  .wf-article-body-wrap
    ::slotted(:not([slot="beforeContent" i]):not([slot="afterContent" i])) {
    font-size: 17px;
  }
}