/* ============================================
   DESIGN SYSTEM - SINGLE SOURCE OF TRUTH
   Based on: homepage hero + SEO service page
   ============================================ */

:root {
  /* Layout */
  --container-max: 1400px;
  --container-pad: 4vw;
  --top-nav-height: 32px;
  --spacing-from-nav: 0.35rem; /* SEO page standard */

  /* Typography - Helvetica Neue hierarchy */
  --font-primary: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

  /* Heading sizes (from SEO page) */
  --h1-size: clamp(2.2rem, 5.6vw, 3.6rem);
  --h1-weight: 300;
  --h1-line-height: 1.05;
  --h1-letter-spacing: 0.15px;

  --h2-size: clamp(1.8rem, 4.5vw, 2.8rem);
  --h2-weight: 400;
  --h2-line-height: 1.2;
  --h2-letter-spacing: 0.12px;

  --h3-size: clamp(1.4rem, 3.5vw, 2.0rem);
  --h3-weight: 500;

  /* Body text */
  --body-size: clamp(0.98rem, 2.3vw, 1.08rem);
  --body-weight: 350;
  --body-line-height: 1.6;

  /* Spacing */
  --section-spacing: 1.6rem;
  --card-spacing: 1rem;
  --paragraph-spacing: 0.55rem;

  /* Colors (existing from site) */
  --bg-primary: #05060a;
  --bg-secondary: #161b22;
  --text-primary: #f0f6fc;
  --text-secondary: #8b949e;
  --border-color: #30363d;
}

/* Global typography reset */
* {
  font-family: var(--font-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Heading hierarchy */
h1, .h1 {
  font-size: var(--h1-size);
  font-weight: var(--h1-weight);
  line-height: var(--h1-line-height);
  letter-spacing: var(--h1-letter-spacing);
  margin: 0 0 0.4rem 0;
}

h2, .h2 {
  font-size: var(--h2-size);
  font-weight: var(--h2-weight);
  line-height: var(--h2-line-height);
  letter-spacing: var(--h2-letter-spacing);
  margin: 0 0 0.5rem 0;
}

h3, .h3 {
  font-size: var(--h3-size);
  font-weight: var(--h3-weight);
  margin: 0 0 0.5rem 0;
}

/* Body text */
p {
  font-size: var(--body-size);
  font-weight: var(--body-weight);
  line-height: var(--body-line-height);
  margin: 0 0 var(--paragraph-spacing) 0;
}

/* Monospace ONLY for code */
code, pre, .code-block, kbd, samp {
  font-family: var(--font-mono) !important;
}

/* Standard container */
.container-standard,
.hero-inner,
.footer-inner {
  width: min(var(--container-max), 100%);
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}

/* Footer full-width wrapper */
.site-footer {
  width: 100%;
  margin: 0;
}

/* Shared hero h1 typography — matches .pn-h1 */
.hero-h1 {
  font-size: var(--h1-size);
  font-weight: var(--h1-weight);
  letter-spacing: var(--h1-letter-spacing);
  line-height: var(--h1-line-height);
}

/* Section spacing from nav */
.scene,
section {
  padding-top: var(--spacing-from-nav);
}

/* Mobile responsive overrides */
@media (max-width: 640px) {
  :root {
    --container-pad: 1rem; /* tighter on mobile */
    --h1-size: clamp(1.8rem, 7vw, 2.4rem);
  }

  .hero-inner {
    margin-right: 50px; /* prevent hamburger overlap */
  }
}