/* ─────────────────────────────────────────────────────────────────────────
   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;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   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); }

/* Site navigation. Ports the reference build's site header: _shared.css:124-152
   and _system.css:42-61, :535-536, :583-591. Classes are prefixed `wf-nav-` so
   they never collide with the host page's global CSS, and each rule is fully
   specified (applyTagSelectors is off, so global tag resets are not available
   inside the component). */

/* Sticky at the top of the page. The header (`.wf-nav` below) is the box that
   sticks. On the published site Webflow renders the host as
   `<code-island style="display:contents">`, so the host has no box and the
   header's parent is whatever the Nav is placed in. That must be Body, or
   another full-height wrapper: sticky only moves within its parent, and a
   Container or Div Block around the Nav, as tall as the bar, pins it in place.
   This rule only applies where the host keeps a box. */
:host {
  position: sticky;
  top: 0;
  z-index: 60;
  display: block;
}

/* ─── Skip link ───────────────────────────────────────────────── */
.wf-nav-skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  padding: 12px 16px;
  background: var(--ink);
  color: var(--paper);
  font: 500 14px/1 var(--sans);
  text-decoration: none;
}

.wf-nav-skip:focus {
  top: 12px;
}

/* ─── Bar ─────────────────────────────────────────────────────── */
/* Background and text colour come from the ground class (grounds.css). */
.wf-nav {
  position: sticky;
  top: 0;
  z-index: 60;
  box-sizing: border-box;
  display: block;
  border-bottom: 1px solid var(--ink-08);
}

.wf-nav.wf-tone-dark {
  border-bottom-color: var(--paper-22);
}

.wf-nav-inner {
  box-sizing: border-box;
  max-width: var(--wrap-max);
  height: 76px;
  margin: 0 auto;
  padding: 0 var(--pad-x);
  display: flex;
  align-items: center;
  gap: 40px;
}

/* Logo — tinted via CSS mask so it takes the ground's text colour without
   shipping separate assets. The URL comes in as `--wf-logo-src`. */
.wf-nav-logo-link {
  display: inline-flex;
  align-items: center;
  margin-right: auto;
  text-decoration: none;
}

.wf-nav-logo {
  display: block;
  width: 132px;
  height: 30px;
  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;
}

/* ─── Links ───────────────────────────────────────────────────── */
/* The CTAs take their colour from here (`color: inherit`). */
.wf-nav-links {
  display: flex;
  align-items: center;
  gap: 40px;
}

.wf-nav-links {
  color: var(--wf-fg, var(--ink));
}

.wf-nav.wf-tone-dark .wf-nav-links {
  color: var(--paper-86);
}

/* The bar's CTA is compact, 40px tall on desktop and 44px at ≤ 991px, and
   never wraps. */
.wf-nav-cta {
  display: flex;
  align-items: center;

  --wf-cta-pad: 0 18px;
  --wf-cta-size: 13px;
  --wf-cta-wrap: nowrap;
  --wf-cta-weight: 400;
  --wf-cta-height: 40px;
}

/* Hidden on desktop; shown at ≤ 991px. */
.wf-nav-menu {
  display: none;
}

/* ─── Mobile and tablet ≤ 991px — the menu sheet ──────────────── */
/* The bar becomes a grid: logo, CTA and Menu button on the first row, the
   links container as the sheet on a second, full-width row. The sheet is in
   flow inside the sticky header, as in the reference build.

   The sheet sets the Nav variant's --wf-nav-* properties, which turn each link
   into a 26px serif row. No tap-target pull-back: the padded rows are already
   taller than 44px. The CTA and the Menu button grow to 44px, as in the
   reference's mobile pass (_system.css:588-589). */
@media (max-width: 991px) {
  .wf-nav-inner {
    height: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas:
      "logo cta menu"
      "sheet sheet sheet";
    align-items: center;
    /* no row gap: the desktop 40px would sit under the bar, sheet closed or open */
    gap: 0 12px;
  }

  .wf-nav-logo-link {
    grid-area: logo;
    height: 64px;
    margin-right: 0;
  }

  .wf-nav-cta {
    grid-area: cta;

    --wf-cta-height: 44px;
  }

  .wf-nav-menu {
    grid-area: menu;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    min-width: 44px;
    padding: 0 14px;
    border: 1px solid var(--ink-30);
    background: none;
    color: var(--wf-fg, var(--ink));
    font: 500 13px/1 var(--sans);
    cursor: pointer;
  }

  .wf-nav.wf-tone-dark .wf-nav-menu {
    border-color: var(--paper-55);
  }

  .wf-nav-links {
    grid-area: sheet;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0 calc(-1 * var(--pad-x));
    padding: 8px var(--pad-x) 28px;
    border-top: 1px solid var(--ink-08);

    --wf-nav-width: 100%;
    --wf-nav-font-family: var(--serif);
    --wf-nav-font-size: 26px;
    --wf-nav-line-height: 1.2;
    --wf-nav-pad: 12px 0;
    --wf-nav-row-rule: 1px solid var(--wf-hairline, var(--ink-08));
    --wf-tap-pull: 0px;
  }

  .wf-nav.wf-tone-dark .wf-nav-links {
    border-top-color: var(--paper-22);
  }

  .wf-nav-links--open {
    display: flex;
  }
}