/* =========================================================
   ProtoBag Studio — Foundations
   Colors + Typography
   ---------------------------------------------------------
   The system is built around a warm-neutral, high-trust
   B2B consulting palette. Black charcoal does the heavy
   lifting; off-whites and bone tones provide warmth; a
   single muted clay accent signals action and craft.
   Type pairs a confident geometric grotesk (Inter Display
   stand-in for the wordmark family) with a refined serif
   used sparingly for editorial accents.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Inter+Tight:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------- Surface / Neutrals (warm) ---------- */
  --bone-50:  #FAF7F2;   /* page background — warm off-white */
  --bone-100: #F4EFE7;   /* card / panel base */
  --bone-200: #ECE6DB;   /* hover surface, subtle bands */
  --bone-300: #DCD4C5;   /* hairlines on warm bg */
  --bone-400: #B8AE9A;   /* muted text on bone */

  --ink-900:  #14130F;   /* primary text — true near-black */
  --ink-800:  #1F1E1A;   /* dark surface */
  --ink-700:  #2B2A25;   /* dark surface alt */
  --ink-600:  #4A4842;   /* secondary text on light */
  --ink-500:  #6E6B62;   /* tertiary text */
  --ink-400:  #95918A;   /* placeholder, captions */
  --ink-300:  #C7C3BB;   /* dividers on white */

  --white:    #FFFFFF;
  --paper:    #FBF9F5;   /* slightly warmer white for cards on bone */

  /* ---------- Accent — single muted clay ---------- */
  /* Used for primary CTAs, active states, key numerals.
     Borrowed from leather + raw kraft tones. */
  --clay-700: #8A4A2B;
  --clay-600: #A8593A;
  --clay-500: #C26A47;   /* primary accent */
  --clay-400: #D88A6A;
  --clay-100: #F2E1D6;   /* tinted backgrounds */

  /* ---------- Semantic ---------- */
  --success:  #4F6B3E;   /* olive — fits warm palette */
  --warning:  #B8893A;
  --danger:   #9A3B2E;
  --info:     #4A6377;   /* slate */

  /* ---------- Mapped semantic tokens ---------- */
  --bg:           var(--bone-50);
  --bg-elev:      var(--paper);
  --bg-inverse:   var(--ink-900);

  --fg:           var(--ink-900);
  --fg-muted:     var(--ink-600);
  --fg-subtle:    var(--ink-500);
  --fg-faint:     var(--ink-400);
  --fg-inverse:   var(--bone-50);

  --border:       var(--bone-300);
  --border-strong:var(--ink-300);
  --border-inverse:rgba(255,255,255,0.14);

  --accent:       var(--clay-500);
  --accent-hover: var(--clay-600);
  --accent-press: var(--clay-700);
  --accent-tint:  var(--clay-100);

  /* ---------- Type families ---------- */
  --font-display: "Inter Tight", "Söhne", "Neue Haas Grotesk Display", system-ui, sans-serif;
  --font-sans:    "Inter", "Söhne", system-ui, -apple-system, sans-serif;
  --font-serif:   "Instrument Serif", "Cormorant Garamond", Georgia, serif;
  --font-mono:    "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;

  /* ---------- Type scale (modular, ~1.18) ---------- */
  /* Display sizes used in hero + section openers; intentionally
     run very large in the spirit of premium consulting layouts. */
  --fs-display-xl: clamp(52px, 7.2vw, 112px);
  --fs-display-lg: clamp(44px, 5.6vw, 84px);
  --fs-display-md: clamp(36px, 4.4vw, 62px);
  --fs-h1:         clamp(36px, 4vw, 52px);
  --fs-h2:         clamp(30px, 3.2vw, 42px);
  --fs-h3:         clamp(20px, 1.7vw, 24px);
  --fs-h4:         18px;
  --fs-body-lg:    17px;
  --fs-body:       16px;
  --fs-body-sm:    14px;
  --fs-caption:    12px;
  --fs-eyebrow:    12px;

  --lh-tight:   1.04;
  --lh-snug:    1.18;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-eyebrow: 0.18em;

  /* ---------- Spacing (4px base) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  --space-40: 160px;

  /* ---------- Radii ---------- */
  /* Restrained: nothing pillish.
     Cards and inputs sit between 4–10px; pills only for chips. */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* ---------- Shadows / Elevation ---------- */
  /* Soft, low-saturation. Premium ≠ dropshadow.
     Most surfaces use hairline borders only. */
  --shadow-1: 0 1px 0 rgba(20,19,15,0.04), 0 1px 2px rgba(20,19,15,0.04);
  --shadow-2: 0 2px 4px rgba(20,19,15,0.04), 0 8px 24px rgba(20,19,15,0.06);
  --shadow-3: 0 12px 32px rgba(20,19,15,0.08), 0 2px 6px rgba(20,19,15,0.05);
  --shadow-inset: inset 0 0 0 1px var(--border);

  /* ---------- Motion ---------- */
  --ease-out:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   140ms;
  --dur-base:   220ms;
  --dur-slow:   420ms;

  /* ---------- Layout ---------- */
  --container:    1280px;
  --container-narrow: 960px;
  --gutter:       clamp(20px, 4vw, 48px);
  --section-y:    clamp(80px, 10vw, 160px);
}

/* ---------- Element defaults ---------- */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
  text-rendering: optimizeLegibility;
}

/* ---------- Headings ---------- */
h1, .h1, h2, .h2, h3, .h3, h4, .h4 {
  font-family: var(--font-display);
  color: var(--fg);
  margin: 0;
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  font-weight: 500;
}
.display-xl { font-size: var(--fs-display-xl); font-weight: 500; letter-spacing: -0.035em; line-height: 0.98; }
.display-lg { font-size: var(--fs-display-lg); font-weight: 500; letter-spacing: -0.03em; line-height: 1.0; }
.display-md { font-size: var(--fs-display-md); font-weight: 500; letter-spacing: -0.025em; line-height: 1.05; }
h1, .h1 { font-size: var(--fs-h1); }
h2, .h2 { font-size: var(--fs-h2); letter-spacing: -0.02em; }
h3, .h3 { font-size: var(--fs-h3); letter-spacing: -0.01em; line-height: var(--lh-snug); }
h4, .h4 { font-size: var(--fs-h4); letter-spacing: -0.005em; line-height: var(--lh-snug); font-weight: 600; }

/* ---------- Body / Paragraph ---------- */
p, .p {
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg-muted);
  text-wrap: pretty;
}
.lede {
  font-size: var(--fs-body-lg);
  line-height: 1.5;
  color: var(--fg);
  max-width: 56ch;
}
.body-sm { font-size: var(--fs-body-sm); line-height: 1.55; color: var(--fg-muted); }
.caption { font-size: var(--fs-caption); color: var(--fg-faint); letter-spacing: 0.01em; }

/* Editorial serif accent — used for pull quotes and a single
   italic word inside otherwise grotesk headlines. */
.serif-accent {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* ---------- Eyebrow / Label ---------- */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
}
.eyebrow.with-dot::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
  margin-right: 10px;
  vertical-align: middle;
  transform: translateY(-1px);
}

/* ---------- Numerals (large stats) ---------- */
.numeral {
  font-family: var(--font-display);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  letter-spacing: -0.04em;
}

/* ---------- Mono ---------- */
code, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  letter-spacing: 0;
}

/* ---------- Links ---------- */
a {
  color: var(--fg);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: 0 100%;
  transition: opacity var(--dur-base) var(--ease-out);
}
a:hover { opacity: 0.6; }

/* ---------- Hairlines ---------- */
.hairline { border: 0; border-top: 1px solid var(--border); margin: 0; }
.hairline-strong { border: 0; border-top: 1px solid var(--ink-900); }

/* ---------- Utility — section frames ---------- */
.container { max-width: var(--container); margin: 0 auto; padding-inline: var(--gutter); }
.container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }