/* Responsibility: Carry hexera.ai's own chrome primitives - background, nav, brand, buttons, labels. */
/* Boundaries: chrome only; the auth column and the dashboard shell are styled by their own sheets. */

/* /
   PORTED, NOT INVENTED. Every value here is lifted from hexera.ai's styles.css with
   orange-theme.css's overrides already applied, which is what the site actually serves. The
   console wears the same button as the marketing page rather than a lookalike that drifts on
   the next site tweak.

   NOT a shared package: hexera-site is a static repository with no build step, so consuming an
   npm module there would mean giving it a bundler. The drift this accepts is recorded in the
   design's section 10.
/ */

/* The still background the site's non-hero pages use. No canvas - see decision 3.
   This is the site's OWN .page-bg (styles.css:441-447): two soft glows over the canvas, not
   the hero's .vignette (a darkening fade) - an earlier draft of this file ported the wrong
   rule. Same positions, sizes and stops as the site; the site hardcodes its literal teal and
   amber here even though orange-theme.css retires both everywhere else, so the colours are
   re-expressed in the current palette (steel, then the one accent) at the same opacities. */
.page-bg{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(115% 80% at 82% -12%,rgba(109,139,175,.12),transparent 56%),
    radial-gradient(95% 70% at -5% 6%,rgba(255,79,0,.07),transparent 52%),
    var(--canvas)}

.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.04;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* Nav - the site's fixed bar, used by the auth pages. */
.nav{position:fixed;top:0;left:0;right:0;height:4.5rem;z-index:20;
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:0 clamp(1.25rem,4vw,4rem);border-bottom:1px solid transparent;
  transition:background .4s cubic-bezier(.16,1,.3,1),border-color .4s cubic-bezier(.16,1,.3,1),
             backdrop-filter .4s cubic-bezier(.16,1,.3,1)}
.nav.is-stuck{background:rgba(13,13,12,.9);backdrop-filter:blur(14px) saturate(1.1);
  border-bottom-color:var(--border)}

/* THE ANCHOR RESET the site carries globally (`a{color:inherit;text-decoration:none}` in its
   styles.css). Scoped to the chrome primitives rather than to every `a`, because this sheet also
   loads on the dashboard, where the legacy chat and timeline stylesheets style their own links
   and a blanket reset here would reach them. Without it the brand wordmark and the nav links
   render with the browser's default underline, which is how the auth pages shipped. */
.brand,.nav__link,.btn{text-decoration:none}

.brand{display:inline-flex;align-items:center;gap:.6rem;color:var(--text)}
.brand__mark{flex:none;display:block;height:24px;width:auto}
.brand__word{font-family:var(--sans);font-weight:600;letter-spacing:.24em;font-size:.95rem;
  padding-left:.05em}

/* THE MONO READOUT VOICE. Every label, eyebrow, nav item, table header and status word in the
   console wears this. It is the single largest thing separating a wind-tunnel instrument from a
   generic dark dashboard, and it is why .label is a primitive rather than a one-off. */
.nav__link,.label{font-family:var(--mono);font-weight:500;font-size:.595rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted)}
.nav__link{position:relative;padding:.4rem 0;transition:color .25s cubic-bezier(.16,1,.3,1)}
.nav__link::after{content:"";position:absolute;left:0;bottom:-.1rem;width:100%;height:1px;
  background:var(--steel);transform:scaleX(0);transform-origin:left;
  transition:transform .35s cubic-bezier(.16,1,.3,1)}
.nav__link:hover{color:var(--text)}
.nav__link:hover::after{transform:scaleX(1)}

/* Buttons - the site's exact geometry and transition. */
.btn{--brd:var(--border-strong);
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-family:var(--sans);font-weight:500;font-size:.95rem;line-height:1;
  padding:.9em 1.4em;border:1px solid var(--brd);border-radius:4px;cursor:pointer;
  white-space:nowrap;background:transparent;color:var(--text);
  transition:transform .3s cubic-bezier(.16,1,.3,1),background .3s cubic-bezier(.16,1,.3,1),
             border-color .3s cubic-bezier(.16,1,.3,1),box-shadow .3s cubic-bezier(.16,1,.3,1),
             color .3s cubic-bezier(.16,1,.3,1)}
.btn:hover{transform:translateY(-2px)}
.btn:disabled{opacity:.5;cursor:default;transform:none}
.btn--gold{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);
  font-weight:600}
.btn--gold:hover{background:var(--accent-hover);
  box-shadow:0 10px 40px rgba(255,79,0,.32),0 0 0 1px rgba(255,112,51,.6)}
.btn--ghost{font-size:.9rem;padding:.7em 1.1em;color:var(--text);
  background:rgba(13,13,12,.42);backdrop-filter:blur(6px)}
.btn--ghost:hover{border-color:var(--steel);
  box-shadow:0 0 0 1px rgba(109,139,175,.4),0 8px 30px rgba(109,139,175,.12)}
.cta-mono{font-family:var(--mono);font-weight:500;font-size:.682rem;letter-spacing:.16em;
  text-transform:uppercase;padding-right:1.1em}