/*
 * Bowden design tokens.
 *
 * Palette: ColorHunt #aaffc767c090215b63124170 — mint → sage → deep teal → navy.
 * Imported by every static marketing page and (via packages/ui/globals.css) by
 * the React app, so the visual system is shared across surfaces.
 */

:root {
  /* Surfaces */
  --bone:     #f7f5f0;
  --bone-2:   #ece8de;
  --bone-3:   #ddd5c1;

  /* Brand */
  --mint:     #aaffc7;
  --sage:     #67c090;
  --teal:     #215b63;
  --navy:     #124170;

  /* Primary CTA */
  --btn-primary:        #67c090;
  --btn-primary-hover:  #4fa978;
  --btn-primary-shadow: rgba(33, 91, 99, 0.25);

  /* Text */
  --ink:      #0e1a1f;
  --ink-2:    rgba(14, 26, 31, 0.72);
  --ink-3:    rgba(14, 26, 31, 0.50);

  /* Borders */
  --rule:     rgba(18, 65, 112, 0.16);
  --rule-2:   rgba(18, 65, 112, 0.32);

  /* On-dark */
  --on-dark:        #f7f5f0;
  --on-dark-mute:   rgba(247, 245, 240, 0.72);

  /* Type — Geometric Tech: Bricolage Grotesque + Manrope + JetBrains Mono */
  --display:  "Bricolage Grotesque", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sans:     "Manrope", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:     "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Spacing & rhythm */
  --gutter:   clamp(1rem, 4vw, 2.5rem);
  --column:   78rem;

  /* Radii */
  --r-sm: 0.375rem;
  --r-md: 0.625rem;
  --r-lg: 1.25rem;
}

/* Universal base — only for static pages (React app keeps its tailwind base) */
.bw-static {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bone);
  font-feature-settings: "ss01", "cv11";
}

.bw-static *,
.bw-static *::before,
.bw-static *::after {
  box-sizing: border-box;
}

.bw-static h1,
.bw-static h2,
.bw-static h3,
.bw-static h4 {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.04;
  margin: 0;
}

.bw-static h1 em,
.bw-static h2 em,
.bw-static h3 em {
  font-style: italic;
  color: var(--teal);
}

.bw-static p {
  margin: 0;
  line-height: 1.55;
}

.bw-static a {
  color: var(--teal);
  text-decoration-color: var(--rule-2);
  text-underline-offset: 0.18em;
}

.bw-static a:hover {
  color: var(--navy);
  text-decoration-color: var(--teal);
}

.bw-static code,
.bw-static .mono {
  font-family: var(--mono);
}

.bw-static img {
  display: block;
  max-width: 100%;
  height: auto;
}

.bw-static :focus-visible {
  outline: 2px solid var(--sage);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}