/* ─────────────────────────────────────────────────────────────────────────
   Atlas AI — design tokens (launch pass)

   Shared CSS custom properties for every code component. Imported once per
   component so each bundle is self-contained in Webflow. Values mirror the
   `:root` blocks in the reference build (atlas-website/site/css/_shared.css
   and _system.css) — keep them in sync, and keep the Site Settings head block
   (site-settings/head.html) in sync with this file. Do not add new colors to
   the palette (see CLAUDE.md § "Things NOT to do").

   ───────────────────────────────────────────────────────────────────────── */
:host,
: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-64: rgba(26, 22, 18, 0.64); /* small text: 5.1:1 on paper, 4.6:1 on paper-deep */
  --ink-55: rgba(26, 22, 18, 0.55); /* form-field borders: 3.5:1 */
  --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-text:  #73572F; /* ochre text under 24px: 5.9:1 on paper */
  --ochre-light: #D9B98A;
  --ochre-soft:  rgba(140, 106, 61, 0.14);
  --gold:        #B89968;

  /* Status */
  --error: #7A2E1E; /* form errors only */

  /* 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;
  --header-h:        76px; /* the sticky Nav; anchors scroll clear of it */
}

@media (max-width: 991px) {
  :host,
  :host {
    --pad-x: 24px;
    --header-h: 64px;
  }
}

/* Shared call-to-action. These rules only apply when the CTA styles itself
   (variant path) — host sections that pass their own `className` keep owning
   every visual property. `wf-` prefixed, self-contained, tokens via var().

   Colours come from the ground the CTA sits on (grounds.css), read with the
   light values as fallbacks. A container can tune the CTAs inside it through
   custom properties, which cross the shadow boundary where selectors can't:

     --wf-cta-size    label size (14px)
     --wf-cta-pad     Solid's padding (14px 20px)
     --wf-cta-wrap    Solid's white-space (normal)
     --wf-cta-weight  Solid's font-weight (500)
     --wf-cta-height  Solid's minimum height (auto), and every CTA's minimum
                      height at ≤ 991px (44px)
     --wf-tap-pull    how far a text link's 44px target pulls back (11px)
     --wf-nav-*       the Nav variant's row look and padding, set by the Nav's
                      mobile sheet

   Reference: _system.css:121-129, :340-354, :638-639 and _shared.css:1113-1121
   in the reference build. */

/* In Webflow a standalone Cta is its own custom element with a shadow root.
   Give the host a sensible box so it behaves like the control inside it —
   otherwise it lays out as an inline box and ignores the flex parent's
   alignment. No-op in the local React render, where there is no shadow root. */
:host {
  display: inline-flex;
  max-width: 100%;
}

.wf-cta {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  font-family: var(--sans);
  font-size: var(--wf-cta-size, 14px);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* The base focus ring (base.css), scoped to the CTA: the host-styled sections
   bundle this stylesheet too, and pick up the base only when they are
   reworked. Ochre on paper, ochre-light on ink. */
.wf-cta:focus-visible {
  outline: 2px solid var(--wf-focus, var(--ochre));
  outline-offset: 3px;
}

/* ─── Label and arrow ─────────────────────────────────────────── */
/* The label is the row that holds the text and the arrow. Keeping the arrow
   inside it means the arrow is centred against the text rather than the whole
   box, and that a rule drawn under the label runs under the arrow too. The
   arrow slides on hover: the one bit of motion in the component. */
.wf-cta-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}

.wf-cta-arrow {
  transition: transform 160ms ease;
}

.wf-cta:hover .wf-cta-arrow--right {
  transform: translateX(4px);
}

.wf-cta:hover .wf-cta-arrow--down {
  transform: translateY(3px);
}

/* ─── Solid — close-cta, btn-primary ──────────────────────────── */
/* The fill is the ground's solid colour: ink on paper, paper on ink. */
.wf-cta--solid {
  min-height: var(--wf-cta-height, auto);
  padding: var(--wf-cta-pad, 14px 20px);
  background: var(--wf-solid-bg, var(--ink));
  color: var(--wf-solid-fg, var(--paper));
  font-weight: var(--wf-cta-weight, 500);
  line-height: 1;
  white-space: var(--wf-cta-wrap, normal);
  transition: opacity 160ms ease;
}

.wf-cta--solid:hover {
  opacity: 0.88;
}

/* ─── Link — text-link ────────────────────────────────────────── */
/* ─── Underline — product-cta, callout-link ───────────────────── */
/* The same rule under the label; Link is the medium weight. The rule is drawn
   on the label, so it runs under text and arrow together. */
.wf-cta--link,
.wf-cta--underline {
  line-height: 1.4;
  transition: opacity 160ms ease;
}

.wf-cta--link {
  font-weight: 500;
}

.wf-cta--underline {
  font-weight: 400;
}

.wf-cta--link .wf-cta-label,
.wf-cta--underline .wf-cta-label {
  padding-bottom: 2px;
  border-bottom: 1px solid currentColor;
}

.wf-cta--link:hover,
.wf-cta--underline:hover {
  opacity: 0.7;
}

/* ─── Nav — nav-link, footer links ────────────────────────────── */
/* Plain text, underlined on hover and on the current page (aria-current is
   set by Cta.tsx). The Nav's mobile sheet sets the --wf-nav-* properties to
   turn each link into a full-width 26px serif row with a hairline under it;
   anywhere else they are unset and the link stays plain. */
.wf-cta--nav {
  width: var(--wf-nav-width, auto);
  border-bottom: var(--wf-nav-row-rule, 0 none);
  font-family: var(--wf-nav-font-family, var(--sans));
  font-size: var(--wf-nav-font-size, var(--wf-cta-size, 14px));
  font-weight: 400;
  line-height: var(--wf-nav-line-height, 1.4);
}

.wf-cta--nav:hover,
.wf-cta--nav[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}

/* ─── Mobile and tablet ≤ 991px — 44px tap targets ────────────── */
/* Every CTA takes a 44px minimum height, its label centred in it. The text
   links then pull the box back with a negative margin, so the line doesn't
   move (base.css `.wf-tap`). A container that stacks links pulls back less,
   through --wf-tap-pull, so neighbouring targets don't overlap. The Nav's
   sheet pulls back none, and pads its rows through --wf-nav-pad. */
@media (max-width: 991px) {
  .wf-cta {
    min-height: var(--wf-cta-height, 44px);
  }

  .wf-cta--link,
  .wf-cta--underline,
  .wf-cta--nav {
    margin-block: calc(-1 * var(--wf-tap-pull, 11px));
  }

  .wf-cta--nav {
    padding: var(--wf-nav-pad, 0);
  }
}

/* ─── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .wf-cta,
  .wf-cta .wf-cta-arrow {
    transition: none;
  }

  .wf-cta:hover .wf-cta-arrow {
    transform: none;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   Accessibility base (MIGRATION-PLAN.md §1.4)

   Imported with the tokens by each component. Document styles don't cross
   shadow roots, so every component carries its own copy of these rules.
   Ported from the reference build's _system.css §2 and its mobile pass.
   ───────────────────────────────────────────────────────────────────────── */

:focus-visible {
  outline: 2px solid var(--wf-focus, var(--ochre));
  outline-offset: 3px;
}

/* Visually hidden, still read by screen readers. */
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 991px) {
  .wf-tap {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-block: calc(-1 * var(--wf-tap-pull, 11px));
  }

  .wf-tap-box {
    min-height: 44px;
  }
}

/* Reduced motion: everything lands in its final state at once. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Editorial eyebrow (mono caps with a hairline tick), and its tick-less small
   label. Colours come from the ground through --wf-eyebrow-fg and
   --wf-eyebrow-tick (grounds.css); with neither set, both follow the text
   colour around it. Reference: _shared.css:66-83, _themes.css:107-109. */
.wf-eyebrow {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: var(--wf-eyebrow-align, flex-start);
  margin: 0;
  font: inherit;
}

/* Opt-in section-level gap under the eyebrow, for slots where the host has no
   spacing of its own to give. */
.wf-eyebrow--margin-bottom {
  margin-bottom: 48px;
}

.wf-eyebrow-tick {
  width: 32px;
  height: 1px;
  background: var(--wf-eyebrow-tick, currentColor);
  opacity: 0.7;
}

.wf-eyebrow-label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--wf-eyebrow-fg, currentColor);
}

/* Tick-less: the small mono label, in quiet text on any ground. */
.wf-eyebrow--plain .wf-eyebrow-label {
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.12em;
  color: var(--wf-fg-quiet, var(--ink-64));
}

/* ─────────────────────────────────────────────────────────────────────────
   Grounds and tones (MIGRATION-PLAN.md rule 8)

   A section sets its ground; the ground's tone publishes the colours that
   depend on it as `--wf-*` custom properties. Custom properties inherit
   through the flattened tree, so they reach slotted components inside their
   own shadow roots, and native content in the light DOM. Readers always give
   the light value as a fallback: `var(--wf-fg, var(--ink))`.

   The tokens file never declares these, so a nested component's `:host`
   can't reset them.
   ───────────────────────────────────────────────────────────────────────── */

.wf-tone-light {
  color: var(--ink);

  --wf-fg:           var(--ink);
  --wf-fg-soft:      var(--ink-70);
  --wf-fg-quiet:     var(--ink-64);
  --wf-rule:         var(--ink-20);
  --wf-hairline:     var(--ink-08);
  --wf-accent:       var(--ochre);
  --wf-accent-text:  var(--ochre-text);
  --wf-focus:        var(--ochre);
  --wf-solid-bg:     var(--ink);
  --wf-solid-fg:     var(--paper);
  --wf-field-bg:     var(--paper);
  --wf-field-fg:     var(--ink);
  --wf-field-border: var(--ink-55);
  --wf-error:        var(--error);
  --wf-eyebrow-fg:   currentColor;
  --wf-eyebrow-tick: currentColor;
}

.wf-tone-dark {
  color: var(--paper);

  --wf-fg:           var(--paper);
  --wf-fg-soft:      var(--paper-74);
  --wf-fg-quiet:     var(--paper-55);
  --wf-rule:         var(--paper-22);
  --wf-hairline:     var(--paper-10);
  --wf-accent:       var(--ochre-light);
  --wf-accent-text:  var(--ochre-light);
  --wf-focus:        var(--ochre-light);
  --wf-solid-bg:     var(--paper);
  --wf-solid-fg:     var(--ink);
  --wf-field-bg:     transparent;
  --wf-field-fg:     var(--paper);
  --wf-field-border: var(--paper-55);
  /* `--error` reads at about 1.6:1 on ink. The prototype has no error state on
     ink, so paper stands in until one is designed. */
  --wf-error:        var(--paper);
  --wf-eyebrow-fg:   var(--paper-55);
  --wf-eyebrow-tick: var(--ochre-light);
}

.wf-ground--paper      { background: var(--paper); }
.wf-ground--paper-alt  { background: var(--paper-alt); }
.wf-ground--paper-deep { background: var(--paper-deep); }
.wf-ground--ink        { background: var(--ink); }

/* Newsletter sign-up. Block ports the footer's `.newsletter`
   (_system.css:74-90); Band ports `.bl-news` (page-blog.css:34-42, :75). The
   slotted form itself is styled from the document (nativeForm.slotted.ts);
   this sheet sizes it through the --wf-field-* and --wf-submit-* properties.
   No `:host` rule: it renders inside the Footer's or a page's shadow root, and
   would restyle that host. */

.wf-newsletter-body {
  margin: 10px 0 14px;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--wf-fg-soft, var(--ink-70));
}

.wf-newsletter-note {
  margin: 10px 0 0;
  font-family: var(--sans);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--wf-fg-quiet, var(--ink-64));

  /* One link in a line of text: pull its tap target back in full, whatever a
     surrounding footer sets for its stacked links. */
  --wf-tap-pull: 11px;
}

.wf-newsletter-note-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ─── Block — the footer's brand column ───────────────────────── */
/* On whatever ground the footer shows: no tone of its own. */
.wf-newsletter--block {
  max-width: 380px;
}

/* ─── Band — the blog index and the end of every post ─────────── */
.wf-newsletter--band {
  box-sizing: border-box;
  padding: 56px 0;
}

.wf-newsletter-wrap {
  box-sizing: border-box;
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}

.wf-newsletter-title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1.2;
  color: var(--wf-fg, var(--ink));
}

.wf-newsletter--band .wf-newsletter-body {
  margin: 10px 0 0;
  font-size: 15px;
}

.wf-newsletter--band .wf-newsletter-form {
  --wf-field-h: 50px;
  --wf-field-pad: 0 16px;
  --wf-submit-pad: 0 22px;
  --wf-submit-size: 15px;
}

/* ─── Mobile and tablet ≤ 991px ───────────────────────────────── */
@media (max-width: 991px) {
  .wf-newsletter-wrap {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* Site footer. Ported from the reference build's _shared.css:1124-1166 and
   _system.css:63-94. The links are Ctas (Nav and Underline variants) rendered
   inside the footer, tuned through the --wf-* properties they read. So is the
   Newsletter; only its native form is slotted.

   The ground class (grounds.css) sets the background, the text colour and the
   --wf-* values, as on the Nav. */

/* A block, full width. Cta.css, bundled in with the links, sets `:host` to
   inline-flex for a standalone Cta; this sheet loads after it and wins. */
:host {
  display: block;
}

.wf-footer {
  box-sizing: border-box;
  padding: 72px 0 40px;
  border-top: 1px solid var(--wf-rule, var(--ink-20));

  /* Stacked links spread their rows a little instead of overlapping their
     44px targets (Cta.css). */
  --wf-tap-pull: 5px;
  /* Column links: ink on paper, paper-55 on ink. */
  --wf-footer-link: var(--wf-fg, var(--ink));
}

.wf-footer.wf-tone-dark {
  --wf-footer-link: var(--paper-55);
}

.wf-footer-wrap {
  box-sizing: border-box;
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

/* Brand column, then the two link columns. */
.wf-footer-grid {
  display: grid;
  grid-template-columns: 1.7fr 0.8fr 0.9fr;
  gap: 56px;
}

.wf-footer-logo {
  display: block;
  width: 120px;
  height: 28px;
  background-color: var(--wf-fg, var(--ink));
  -webkit-mask-image: var(--wf-logo-src);
  mask-image: var(--wf-logo-src);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: left center;
  mask-position: left center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.wf-footer-tag {
  margin: 20px 0 0;
  max-width: 300px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--wf-fg-quiet, var(--ink-64));
}

.wf-footer-newsletter {
  margin-top: 34px;
}

/* ─── Link columns ────────────────────────────────────────────── */
/* The heading is the tick-less Eyebrow, in quiet text (_system.css:66-69). Two
   classes deep, so it wins over the Eyebrow's own `margin: 0` whatever order
   the two sheets land in. */
.wf-footer-col .wf-footer-col-heading {
  margin-bottom: 18px;
}

/* The links stack; their colour comes from --wf-footer-link and inherits into
   each Cta. */
.wf-footer-col-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  color: var(--wf-footer-link, var(--wf-fg, var(--ink)));
}

/* Legal row: the © text and the links, in quiet 12px. The links are Underline
   CTAs; they take the size and colour from here. */
.wf-footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 28px;
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--wf-hairline, var(--ink-08));
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.5;
  color: var(--wf-fg-quiet, var(--ink-64));

  --wf-cta-size: 12px;
}

/* ─── Mobile and tablet ≤ 991px — brand full width, columns 2-up ─ */
@media (max-width: 991px) {
  .wf-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }

  .wf-footer-brand {
    grid-column: 1 / -1;
  }
}