/* ============================================================
   NxtAtlas AI — the brand layer.

   Loaded last, after styles.css and redesign.css. It does not
   restyle components one by one: the application already runs on
   a token system, so redefining the tokens re-skins everything
   that was built correctly, and the pages only need to handle
   what token values cannot express — type, rhythm, motion.

   Ink and brass, matching nxtatlas.com. Both themes are covered:
   the app has a light mode and people use it.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600&family=Manrope:wght@300;400;500;600;700&display=swap");

/* ---------- LIGHT: warm paper, brass accent ----------
   Scoped, not bare `:root`. The app ships five named themes — dracula, nord,
   tokyo, solarized, sunset — declared as [data-theme="..."] in styles.css at
   the same specificity. A bare :root here loads later and wins, which turned
   every one of them into this palette while their swatches still promised the
   old colours. Matching only "no theme chosen" and "light" leaves them alone. */
:root:not([data-theme]),
:root[data-theme="light"] {
  --bg:            #faf8f5;
  --bg-sidebar:    #f2eee7;
  --bg-elev:       #ffffff;
  --bg-hover:      #ebe5da;
  --bg-active:     #e2dace;
  --bg-input:      #ffffff;
  --bg-bubble:     #f2eee7;
  --bg-code:       #f4f1ea;
  --bg-modal:      #ffffff;
  --backdrop:      rgba(20, 16, 10, 0.38);

  --text:          #1a1712;
  --text-muted:    #6b6355;
  --text-soft:     #8d8474;
  --text-invert:   #14100a;

  --border:        rgba(26, 23, 18, 0.10);
  --border-strong: rgba(26, 23, 18, 0.18);
  --border-input:  rgba(26, 23, 18, 0.14);

  /* the single accent, same brass as the site */
  --accent:        #b07f34;
  --accent-hover:  #9c6f2b;
  --accent-soft:   rgba(176, 127, 52, 0.12);
  --accent-text:   #ffffff;

  --danger:        #a8322a;
  --success:       #1a6b48;

  /* the old prefixed set, kept in step so nothing is left behind */
  --jn-orange:     var(--accent);
  --jn-text:       var(--text);
  --jn-text-muted: var(--text-muted);
  --jn-text-faint: var(--text-soft);
  --jn-border:     var(--border);

}

/* ---------- theme-independent ----------
   These four do not change with the theme, so they must not live inside a
   themed block. They did, and scoping that block to "light or nothing" left
   them undefined under the app's default dark and under every named theme —
   which silently dropped the typeface back to the old sans and turned any
   brass border into currentColor. A variable that is the same in every theme
   belongs on bare :root. */
:root {
  --atlas-brass:      #d1a05a;
  --atlas-brass-soft: rgba(209, 160, 90, 0.34);
  --atlas-display: "Sora", system-ui, -apple-system, sans-serif;
  --atlas-body:    "Manrope", system-ui, -apple-system, sans-serif;
}

/* ---------- DARK: the site's ink, brass unchanged ---------- */
:root[data-theme="dark"],
html[data-theme="dark"] {
  --bg:            #0a0b0d;
  --bg-sidebar:    #0f1114;
  --bg-elev:       #12141a;
  --bg-hover:      #191c22;
  --bg-active:     #21252d;
  --bg-input:      #12141a;
  --bg-bubble:     #14171d;
  --bg-code:       #0f1114;
  --bg-modal:      #12141a;
  --backdrop:      rgba(5, 6, 8, 0.66);

  --text:          #ece8e1;
  --text-muted:    rgba(236, 232, 225, 0.68);
  --text-soft:     rgba(236, 232, 225, 0.48);
  --text-invert:   #14100a;

  --border:        rgba(236, 232, 225, 0.10);
  --border-strong: rgba(236, 232, 225, 0.18);
  --border-input:  rgba(236, 232, 225, 0.14);

  --accent:        #d1a05a;
  --accent-hover:  #e0b473;
  --accent-soft:   rgba(209, 160, 90, 0.12);
  --accent-text:   #14100a;

  --danger:        #e5a3a3;
  --success:       #7fc9a4;
}

/* The same trap as above: `:not([data-theme="light"])` still matches dracula
   and friends, so a dark OS would have overridden them here instead. This
   applies only when the visitor has chosen nothing at all. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg:            #0a0b0d;
    --bg-sidebar:    #0f1114;
    --bg-elev:       #12141a;
    --bg-hover:      #191c22;
    --bg-active:     #21252d;
    --bg-input:      #12141a;
    --bg-bubble:     #14171d;
    --bg-code:       #0f1114;
    --bg-modal:      #12141a;
    --backdrop:      rgba(5, 6, 8, 0.66);
    --text:          #ece8e1;
    --text-muted:    rgba(236, 232, 225, 0.68);
    --text-soft:     rgba(236, 232, 225, 0.48);
    --text-invert:   #14100a;
    --border:        rgba(236, 232, 225, 0.10);
    --border-strong: rgba(236, 232, 225, 0.18);
    --border-input:  rgba(236, 232, 225, 0.14);
    --accent:        #d1a05a;
    --accent-hover:  #e0b473;
    --accent-soft:   rgba(209, 160, 90, 0.12);
    --accent-text:   #14100a;
    --danger:        #e5a3a3;
    --success:       #7fc9a4;
  }
}

/* ============================================================
   TYPE
   Geometric display, clean body — the same pairing as the site.
   ============================================================ */
body,
input, textarea, select, button {
  font-family: var(--atlas-body);
}
h1, h2, h3, h4,
.atlas-display {
  font-family: var(--atlas-display);
  font-weight: 500;
  letter-spacing: -0.03em;
}

/* ============================================================
   THE WORDMARK — NXTΛTLAS
   First A is the crossbar-less Λ, exactly as in the logo; the
   second A stays a normal A. Always ship the aria-label.
   Markup:  <span class="atlas-wm" aria-label="NxtAtlas">NXT<i>Λ</i>TLAS</span>
   ============================================================ */
.atlas-wm {
  font-family: var(--atlas-display);
  font-weight: 600;
  letter-spacing: 0.14em;
}
.atlas-wm i { font-style: normal; color: var(--accent); }

/* ============================================================
   MOTION
   Two worlds. The showcase pages may take their time; the
   application must not. A reveal-on-scroll in a chat log fights
   the autoscroll and makes the product feel broken, so the
   hidden-until-revealed state exists only where it belongs.
   ============================================================ */
html.js[data-motion="showcase"]:not(.no-motion) .a-reveal { opacity: 0; }

.a-word-outer { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.06em; }
.a-word-inner { display: inline-block; will-change: transform; }

/* Lenis only ever runs on showcase pages */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .a-reveal { opacity: 1 !important; transform: none !important; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ============================================================
   SHARED POLISH
   Small things the token swap cannot express on its own.
   ============================================================ */
::selection { background: var(--accent); color: var(--accent-text); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* a hairline of brass under anything acting as a primary surface edge */
.atlas-rule { display: flex; align-items: center; gap: 14px; }
.atlas-rule span { flex: 1; height: 1px; background: var(--border); }

/* present to screen readers, absent to the eye */
.atlas-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}