/* Shared foundation for the product/solution landing pages (/stack/, /venue/,
   /lane/, /charter/), loaded by src/_includes/layouts/product.njk.
   Tokens are copied from the Altius Labs design system used by the Claude
   Design files and scoped to body.page-product so they never leak into the
   Webflow pages. Page-specific rules live in assets/<slug>/<slug>.css.
   The DS label face, Fabrikat Mono, is already self-hosted with the Webflow
   assets under the family name "Fabrikatmono" (altius-new.webflow.shared CSS),
   so --font-mono points at that name first. */

.page-product {
  --altius-black: #190501;
  --altius-white: #F7F6FF;
  --altius-orange: #FA5838;
  --altius-peach: #FEEAE6;
  --warm-950: #190501;
  --warm-900: #241310;
  --warm-800: #33211d;
  --warm-700: #4a3833;
  --warm-600: #6b5751;
  --warm-500: #8f7d77;
  --warm-400: #b3a49f;
  --warm-300: #d3c8c4;
  --warm-200: #e7dfdc;
  --warm-100: #f1ecea;
  --warm-050: #f8f5f4;
  --orange-600: #d8431f;
  --orange-500: #FA5838;
  --orange-100: #FEEAE6;
  --surface-page: var(--altius-white);
  --surface-raised: #ffffff;
  --surface-sunken: var(--warm-050);
  --surface-inverse: var(--altius-black);
  --surface-tint: var(--altius-peach);
  --surface-card: #ffffff;
  --text-primary: var(--altius-black);
  --text-secondary: var(--warm-600);
  --text-muted: var(--warm-500);
  --text-inverse: var(--altius-white);
  --text-inverse-muted: rgba(247, 246, 255, 0.62);
  --text-accent: var(--altius-orange);
  --border-hairline: rgba(25, 5, 1, 0.12);
  --border-strong: rgba(25, 5, 1, 0.24);
  --border-inverse: rgba(247, 246, 255, 0.16);
  --border-accent: var(--altius-orange);
  --accent: var(--altius-orange);
  --accent-hover: var(--orange-600);
  --accent-wash: var(--orange-100);
  --focus-ring: rgba(250, 88, 56, 0.45);
  --font-sans: "Matter", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Fabrikatmono", "Fabrikat Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  --fw-medium: 500;
  --radius-sm: 3px;
  --dur-fast: 160ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --nav-clearance: 140px; /* top padding that clears the fixed site nav */
}

.page-product .product-page {
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-sans);
}

/* Webflow's base CSS styles headings/paragraphs (sizes, margins, and some
   colors via -webkit-text-fill-color); reset them inside product pages. */
.page-product .product-page :is(h1, h2, h3, h4, p, ul, ol) {
  margin: 0;
  font-family: var(--font-sans);
  color: inherit;
  -webkit-text-fill-color: currentColor;
}
.page-product .product-page a { -webkit-text-fill-color: currentColor; }

/* DS Button (primary / accent / secondary / ghost; md and lg sizes). */
.page-product .ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 11px 20px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: var(--fw-medium);
  line-height: 1;
  letter-spacing: -0.005em;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
.page-product .ds-btn--lg { padding: 15px 26px; font-size: 16px; }
.page-product .ds-btn--primary { background: var(--altius-black); color: var(--altius-white); border-color: var(--altius-black); }
.page-product .ds-btn--primary:hover { background: var(--warm-800); border-color: var(--warm-800); color: var(--altius-white); }
.page-product .ds-btn--accent { background: var(--altius-orange); color: var(--altius-white); border-color: var(--altius-orange); }
.page-product .ds-btn--accent:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--altius-white); }
.page-product .ds-btn--secondary { background: transparent; color: var(--text-primary); border-color: var(--border-strong); }
.page-product .ds-btn--secondary:hover { border-color: var(--altius-black); color: var(--text-primary); }
.page-product .ds-btn--ghost { background: transparent; color: var(--text-primary); }
.page-product .ds-btn--ghost:hover { background: var(--warm-100); color: var(--text-primary); }
.page-product .ds-btn--light { background: var(--altius-white); color: var(--altius-black); border-color: var(--altius-white); }
.page-product .ds-btn--light:hover { background: var(--warm-200); border-color: var(--warm-200); color: var(--altius-black); }
.page-product .ds-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

@media (max-width: 479px) {
  .page-product .ds-btn { white-space: normal; text-align: center; }
}