/* ============================================================
   BLUEGREY — BASE + CHROME
   Imports the token system, then sets element defaults, the
   background motifs, and the shared header/nav/footer chrome.
   Every value resolves to a token in tokens.css.
   ============================================================ */

@import url("tokens.css");

/* ---------- 0.0 reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background: var(--color-page);
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; padding: 0; }
:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); }

/* The page world is flat Carbon — the faint engineering grid and drifting
   glows are retired with the earlier direction. */

/* ---------- 2.0 layout ---------- */
.container {
  width: 100%;
  max-width: var(--maxw-content);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
@media (min-width: 768px) { .container { padding-inline: var(--gutter-lg); } }
main.container { padding-block: var(--space-9) var(--space-11); min-height: 60vh; }

/* ---------- 4.0 spec label (the mono voice: BG-01 / NESTER) ---------- */
.spec-label {
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

/* ---------- 5.0 chips ---------- */
.chip {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-weight: var(--weight-medium);
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  border: var(--border-hairline);
  background: var(--color-muted-fill);
  color: var(--color-text-secondary);
  vertical-align: middle;
  white-space: nowrap;
}
.chip--beta { color: var(--color-accent-bright); border-color: var(--color-border-bright); }

/* ---------- 5.0 buttons (UI is Inter 600, per Brand Pack) ---------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-body); font-weight: var(--weight-semibold);
  font-size: var(--text-sm); line-height: 1;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  border: var(--border-hairline);
  transition: var(--transition-colors), transform var(--dur-fast) var(--ease-standard);
}
.btn--solid  { background: var(--color-accent); color: var(--color-on-accent); border-color: var(--color-accent); }
.btn--solid:hover  { background: var(--color-accent-bright); border-color: var(--color-accent-bright); }
.btn--border { color: var(--color-text); }
.btn--border:hover { border-color: var(--color-border-bright); color: var(--color-accent-bright); }
.btn--muted  { color: var(--color-text-secondary); }
.btn--muted:hover  { color: var(--color-text); border-color: var(--color-border-strong); }
/* flame: the one loud, rare action — waitlist + pricing CTA only */
.btn--action { background: var(--color-action); color: var(--color-on-action); border-color: var(--color-action); }
.btn--action:hover { background: var(--color-action-hover); border-color: var(--color-action-hover); color: var(--color-on-action); }
.btn:active { transform: translateY(1px); }

/* ============================================================
   HEADER / NAV
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: var(--z-nav);
  background: var(--color-page-translucent);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border-bottom: var(--border-hairline);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--space-8); gap: var(--space-5);
}

.logo {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-display); font-weight: var(--weight-bold);
  font-size: var(--text-md); letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}
.logo__bar--blue { fill: var(--color-accent); }   /* slate */
.logo__bar--grey { fill: var(--color-text); }      /* ivory */

.site-nav__list { display: flex; align-items: center; gap: var(--space-5); }
.site-nav a, .nav-tools__trigger {
  font-size: var(--text-sm); color: var(--color-text-secondary);
  transition: var(--transition-colors);
}
.site-nav a:hover, .nav-tools__trigger:hover { color: var(--color-accent-bright); }
.site-nav .btn { color: var(--color-text); }

/* tools dropdown */
.nav-tools { position: relative; }
.tools-menu {
  position: absolute; top: calc(100% + var(--space-3)); left: 0;
  min-width: 24rem; padding: var(--space-4);
  background: var(--color-surface); border: var(--border-hairline);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-pop);
  display: grid; gap: var(--space-4);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition:
    opacity var(--dur-fast) var(--ease-standard),
    transform var(--dur-fast) var(--ease-out-expo),
    visibility var(--dur-fast) var(--ease-standard);
}
.nav-tools:hover .tools-menu,
.nav-tools:focus-within .tools-menu { opacity: 1; visibility: visible; transform: none; }

.tools-menu__group { display: grid; gap: var(--space-2); }
.tool-link {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: var(--space-1) var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md); border: 1px solid transparent;
  transition: var(--transition-colors);
}
.tool-link:hover { background: var(--color-surface-raised); border-color: var(--color-border-bright); }
.tool-link__name {
  grid-column: 1; grid-row: 1;
  font-family: var(--font-display); font-weight: var(--weight-bold);
  font-size: var(--text-base); color: var(--color-text);
}
.tool-link__benefit { grid-column: 1; grid-row: 2; font-size: var(--text-sm); color: var(--color-text-secondary); }
.tool-link .chip { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.tools-menu__all { font-size: var(--text-sm); color: var(--color-accent-bright); justify-self: start; }

/* burger + mobile menu (CSS-only, checkbox hack) */
.nav-toggle, .nav-burger { display: none; }

@media (max-width: 767px) {
  .nav-burger {
    display: inline-flex; flex-direction: column; gap: 5px;
    width: var(--space-6); height: var(--space-6);
    align-items: center; justify-content: center;
  }
  .nav-burger span {
    display: block; width: 20px; height: 2px; background: var(--color-text);
    transition: transform var(--dur-fast) var(--ease-standard), opacity var(--dur-fast) var(--ease-standard);
  }
  /* the header's backdrop-filter would otherwise make it the containing
     block for the fixed panel below, collapsing it; drop the blur on mobile */
  .site-header { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .site-nav {
    position: fixed; inset: var(--space-8) 0 0 0; z-index: var(--z-menu);
    background: var(--color-page); border-top: var(--border-hairline);
    padding: var(--space-6) var(--gutter); overflow-y: auto;
    transform: translateX(100%);
    transition: transform var(--dur-base) var(--ease-out-expo);
  }
  .nav-toggle:checked ~ .site-nav { transform: none; }
  .site-nav__list { flex-direction: column; align-items: stretch; gap: var(--space-4); }
  .nav-tools__trigger { font-size: var(--text-lg); color: var(--color-text); }
  .tools-menu {
    position: static; min-width: 0; padding: var(--space-3) 0 0;
    background: transparent; border: 0; box-shadow: none;
    opacity: 1; visibility: visible; transform: none;
  }
  .site-nav .btn { justify-content: center; }
  .nav-toggle:checked ~ .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle:checked ~ .nav-burger span:nth-child(2) { opacity: 0; }
  .nav-toggle:checked ~ .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  border-top: var(--border-hairline);
  margin-top: var(--space-10);
  padding-block: var(--space-8);
  position: relative;
}
.site-footer__top {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-4); margin-bottom: var(--space-7);
}
.site-footer__tag { color: var(--color-text-secondary); font-size: var(--text-sm); }

.footer-directory {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--space-6);
  padding-bottom: var(--space-7); border-bottom: var(--border-hairline);
}
.footer-directory__group { display: grid; gap: var(--space-3); align-content: start; }
.footer-directory ul { display: grid; gap: var(--space-3); }
.footer-directory li { display: grid; gap: 2px; }
.footer-directory a {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-display); font-weight: var(--weight-medium);
  color: var(--color-text); transition: var(--transition-colors);
}
.footer-directory a:hover { color: var(--color-accent-bright); }
.footer-directory__benefit { font-size: var(--text-sm); color: var(--color-text-secondary); }

.site-footer__base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3);
  padding-top: var(--space-5); color: var(--color-text-secondary); font-size: var(--text-sm);
}

/* ============================================================
   PAGE SHELL MARKER (placeholder until real page content lands)
   ============================================================ */
.page-title {
  font-family: var(--font-display); font-weight: var(--weight-bold);
  font-size: var(--text-3xl); line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin-block: var(--space-3) var(--space-4);
}
.page-note { color: var(--color-text-secondary); max-width: var(--maxw-prose); }
.page-note a { color: var(--color-accent-bright); transition: var(--transition-colors); }
.page-note a:hover { color: var(--color-text); }
.page-cta { margin-top: var(--space-6); }
/* hero/display type drops a rung on small screens (token sizes only, DESIGN.md 1.3) */
@media (max-width: 767px) { .page-title { font-size: var(--text-2xl); } }
@media (max-width: 420px) { .page-title { font-size: var(--text-xl); } }

/* ============================================================
   HOVER GRAMMAR — text/nav links grow a 1px underline from the
   left (transform-only, no layout thrash). Cards + buttons handled
   in their own blocks above.
   ============================================================ */
.site-nav__list > li > a:not(.btn),
.nav-tools__trigger,
.footer-directory a,
.tools-menu__all { position: relative; }
.site-nav__list > li > a:not(.btn)::after,
.nav-tools__trigger::after,
.footer-directory a::after,
.tools-menu__all::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px;
  background: var(--color-accent-bright);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-fast) var(--ease-standard);
}
.site-nav__list > li > a:not(.btn):hover::after,
.nav-tools:hover .nav-tools__trigger::after,
.nav-tools__trigger:focus-visible::after,
.footer-directory a:hover::after,
.tools-menu__all:hover::after { transform: scaleX(1); }

/* ============================================================
   CARD — one product card for everywhere (DESIGN.md 5.0)
   ============================================================ */
.product-grid {
  display: grid; gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.card {
  display: grid; gap: var(--space-3); align-content: start;
  background: var(--color-surface); border: var(--border-hairline);
  border-radius: var(--radius-lg); padding: var(--space-6);
  transition: var(--transition-lift);
}
.card:hover { transform: translateY(-4px); border-color: var(--color-border-bright); }
.card__icon { width: var(--space-8); height: var(--space-8); color: var(--color-accent); }
.card__icon svg { width: 100%; height: 100%; display: block; }
.card__icon [stroke] { stroke: currentColor; }
.card__name {
  display: flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-lg);
  color: var(--color-text);
}
.card__tag {
  font-family: var(--font-display); font-weight: var(--weight-medium);
  font-size: var(--text-sm); color: var(--color-text-secondary);
}
.card__desc { font-size: var(--text-base); color: var(--color-text); }
.card__cta { margin-top: var(--space-2); justify-self: start; }

/* ============================================================
   SECTION — generic content block spacing + heads
   ============================================================ */
.section { padding-block: var(--space-9); }
.section__head { display: grid; gap: var(--space-2); margin-bottom: var(--space-6); }
.section__title {
  font-family: var(--font-display); font-weight: var(--weight-bold);
  font-size: var(--text-2xl); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight);
}

/* ============================================================
   TOOLPATH — CNC cut-line connective tissue (DESIGN.md 3.3).
   stroke-dashoffset is the one sanctioned non-transform/opacity
   property for the draw-in (MOTION.md 0.1 / 2.1).
   ============================================================ */
.toolpath { display: block; overflow: visible; }
.toolpath line, .toolpath path {
  stroke: var(--toolpath-color); stroke-width: var(--toolpath-width);
  stroke-dasharray: 6 6; fill: none;
}
.toolpath__node { fill: var(--color-accent-bright); }
.js [data-reveal] .toolpath line,
.js [data-reveal] .toolpath path {
  stroke-dashoffset: 280;
  transition: stroke-dashoffset var(--dur-reveal) var(--ease-out-expo);
}
.js [data-reveal].is-visible .toolpath line,
.js [data-reveal].is-visible .toolpath path { stroke-dashoffset: 0; }

/* ============================================================
   5.0 HERO LOAD + SCROLL REVEAL
   Both gated behind .js (added by an inline head script) so that
   with JS OFF nothing is hidden — content renders fully.
   ============================================================ */
/* hero load choreography (MOTION.md 1.0) */
.js [data-hero] > * { opacity: 0; transform: translateY(20px); }
.js [data-hero].is-loaded > * {
  opacity: 1; transform: none;
  transition:
    opacity var(--dur-reveal) var(--ease-out-expo),
    transform var(--dur-reveal) var(--ease-out-expo);
  transition-delay: calc(var(--i, 0) * var(--stagger-step));
}
/* scroll reveal (MOTION.md 2.0) */
.js [data-reveal] {
  opacity: 0; transform: translateY(16px);
  transition:
    opacity var(--dur-reveal) var(--ease-out-expo),
    transform var(--dur-reveal) var(--ease-out-expo);
  transition-delay: calc(var(--i, 0) * var(--stagger-step));
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }

/* ============================================================
   6.0 prefers-reduced-motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* force every reveal/hero target visible regardless of .js state */
  .js [data-reveal], .js [data-reveal].is-visible,
  .js [data-hero] > *, .js [data-hero].is-loaded > *,
  [data-reveal], [data-hero] > * {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .toolpath line, .toolpath path { stroke-dashoffset: 0 !important; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}