/* ============================================================
   New Bridge Studios — Colors & Type
   Imported by every preview / kit / slide file in this system.

   Layered as:
     1. @font-face          — local Host Grotesk
     2. :root tokens        — colors, semantics, radii, spacing,
                              motion, layout, focus
     3. .nbs base + variants — body type styles + light / leaf modes
     4. Semantic type classes
     5. Surface utilities    — .surface-card / -sunken / -glass / -overlay / -leaf
   ============================================================ */

/* ---------- 1. Local Host Grotesk (variable weight) ---------- */
/* Single valid format() per src — `format("truetype")` is enough
   for variable TTFs in every modern browser. The previous file shipped
   `format("truetype-variations")` first, which is non-standard CSS and
   was being ignored. */
@font-face {
  font-family: "Host Grotesk";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("fonts/HostGrotesk-VariableFont_wght.ttf") format("truetype");
}
@font-face {
  font-family: "Host Grotesk";
  font-style: italic;
  font-weight: 300 800;
  font-display: swap;
  src: url("fonts/HostGrotesk-Italic-VariableFont_wght.ttf") format("truetype");
}

/* ---------- 2. Tokens ---------- */
:root {
  /* ----------  CORE PALETTE  ----------
     Two axes: forest (almost-black greens) and leaf (one loud accent).
     No blue, no orange, no red, no purple anywhere.

     Canonical greens (use these by default):
       --nbs-leaf         signature accent
       --nbs-leaf-bright  stroke / hover / over-glow
       --nbs-leaf-fog     paper-sage background

     Canonical bones:
       --nbs-bone         warm paper (light-mode page bg)
       --nbs-bone-mute    page tint / soft body color on dark

     Forest scale runs 500–900, darkest to lightest is reversed by
     intent — 700 is the *primary* surface; 500 is the lightest moss. */

  --nbs-leaf:        rgb(165, 217, 109);   /* #A5D96D — signature leaf-green */
  --nbs-leaf-bright: rgb(206, 255, 131);   /* #CEFF83 — hi-vis stroke / accent */
  --nbs-leaf-fog:    rgb(222, 230, 210);   /* #DEE6D2 — paper-sage page bg */

  /* Legacy sage tints — kept as aliases so existing previews don't break.
     Prefer --nbs-leaf-fog for backgrounds. Slated for removal. */
  --nbs-leaf-soft:   rgb(221, 255, 179);   /* #DDFFB3 — legacy */
  --nbs-leaf-mute:   rgb(189, 206, 163);   /* #BDCEA3 — legacy */

  --nbs-forest-900:  rgb(1, 10, 6);        /* #010A06 — near-black forest */
  --nbs-forest-800:  rgb(2, 18, 11);       /* #02120B — deep forest, deck bg */
  --nbs-forest-700:  rgb(3, 26, 15);       /* #031A0F — PRIMARY dark surface */
  --nbs-forest-600:  rgb(4, 39, 28);       /* #04271C — secondary dark surface */
  --nbs-forest-500:  rgb(19, 45, 21);      /* #132D15 — moss / card on dark */

  --nbs-bone:        rgb(247, 250, 241);   /* #F7FAF1 — warm paper */
  --nbs-bone-soft:   rgb(245, 253, 228);   /* #F5FDE4 — warm cream */
  --nbs-bone-mute:   rgb(238, 245, 226);   /* #EEF5E2 — page tint / soft body */

  --nbs-white:       rgb(255, 255, 255);
  --nbs-black:       rgb(0, 0, 0);

  /* RGB triples — for opacity composition without rgba() bloat.
     Use as: rgb(var(--nbs-leaf-rgb) / 0.32) */
  --nbs-leaf-rgb:        165 217 109;
  --nbs-leaf-bright-rgb: 206 255 131;
  --nbs-forest-700-rgb:  3 26 15;
  --nbs-forest-500-rgb:  19 45 21;
  --nbs-bone-rgb:        247 250 241;

  /* ----------  SEMANTIC TOKENS  ----------
     Default mode is DARK FOREST. .nbs--light flips into bone,
     .nbs--leaf flips into the loud accent panel. */
  --bg:              var(--nbs-forest-700);
  --bg-elevated:     var(--nbs-forest-500);
  --bg-sunken:       var(--nbs-forest-800);
  --bg-overlay:      rgb(var(--nbs-forest-500-rgb) / 0.48);
  --bg-overlay-soft: rgb(var(--nbs-forest-500-rgb) / 0.28);
  --bg-glass:        rgb(var(--nbs-forest-700-rgb) / 0.50); /* + blur 5px */
  --bg-glass-light:  rgba(245, 253, 228, 0.12);

  --fg:      var(--nbs-white);
  --fg-soft: var(--nbs-bone);
  --fg-mute: var(--nbs-bone-mute);
  --fg-dim:  rgba(247, 250, 241, 0.72);

  --accent:       var(--nbs-leaf);
  --accent-hover: var(--nbs-leaf-bright);
  --on-accent:    var(--nbs-forest-700);

  --rule:        rgba(255, 255, 255, 0.16);
  --rule-strong: var(--nbs-white);

  /* Focus ring — leaf-bright outline at 2px, 2px offset.
     Use everywhere a control is keyboard-focusable. */
  --focus-ring:        0 0 0 2px var(--bg), 0 0 0 4px var(--nbs-leaf-bright);
  --focus-ring-inset:  inset 0 0 0 2px var(--nbs-leaf-bright);

  /* Shadows — used sparingly. */
  --shadow-logo: 0 4px 30.6px rgba(0, 0, 0, 0.5);
  --shadow-card: 0 2px 24px rgba(1, 10, 6, 0.32);
  --shadow-card-light: 0 2px 24px rgba(1, 10, 6, 0.08);

  /* ----------  RADII  ----------
     Brand language: BIG radii on cards/pills, 0/sharp on tiles, nothing
     in between. Canonical scale below. The 44px/48px micro-variance
     observed on the services slide is intentional per-instance noise,
     not a separate token. */
  --radius-pill: 9999px;
  --radius-arch: 280px;  /* hero stadium card */
  --radius-card: 80px;   /* feature cards */
  --radius-tile: 48px;   /* secondary cards */
  --radius-none: 0;      /* corner badges, hero tiles, footers */

  /* Legacy radius aliases — kept for back-compat with existing slides.
     Prefer the canonical tokens above. */
  --radius-arch-sm: 200px;
  --radius-tile-sm: 44px;

  /* ----------  SPACING  ----------
     Doubling-ish scale: 4 / 8 / 16 / 24 / 32 / 48 / 64 / 80.
     Use --space-7 (80) for the big hero gutter, --space-6 (48) and
     --space-8 (64) to fill the mid-large range. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 80px;
  --space-8: 64px;

  /* ----------  LAYOUT  ----------
     Marketing-site containers. Slides are fixed 1280×720 and don't
     use these. */
  --container-narrow: 720px;
  --container:        1080px;
  --container-wide:   1280px;
  --gutter:           var(--space-5); /* 32px desktop default */

  /* ----------  MOTION  ----------
     Brand motion is fast and calm. No bounces, no springy overshoot. */
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 400ms;
  --ease-out:    cubic-bezier(0.16, 0.84, 0.32, 1);
  --ease-in-out: cubic-bezier(0.42, 0, 0.32, 1);

  /* ----------  TYPE  ---------- */
  --font-display: "Host Grotesk", "Inter", system-ui, sans-serif;
  --font-body:    "Host Grotesk", "Inter", system-ui, sans-serif;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extra:    800;

  --tracking-display: -0.014em;
  --tracking-body:    0;

  --lh-display: 1.12;
  --lh-heading: 1.24;
  --lh-body:    1.28;
  --lh-prose:   1.5;
}

/* Respect user motion preferences. Brand motion is already calm; this
   collapses everything to near-instant for users who ask for it. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
  * {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ============================================================
   3. .nbs base + light / leaf variants
   ============================================================ */

.nbs,
.nbs * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.nbs {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  color: var(--fg);
  background: var(--bg);
  font-size: 16px;
  line-height: var(--lh-body);
}

/* Light / paper variant. */
.nbs--light {
  background: var(--nbs-bone);
  color: var(--nbs-forest-900);
  --bg: var(--nbs-bone);
  --bg-elevated: var(--nbs-bone-soft);
  --bg-sunken:   var(--nbs-bone-mute);
  --fg: var(--nbs-forest-900);
  --fg-soft: var(--nbs-forest-700);
  --fg-mute: var(--nbs-forest-600);
  --rule: rgba(3, 26, 15, 0.16);
}

/* Leaf — loud accent panel. */
.nbs--leaf {
  background: var(--nbs-leaf);
  color: var(--nbs-forest-700);
  --bg: var(--nbs-leaf);
  --fg: var(--nbs-forest-700);
  --fg-soft: var(--nbs-forest-700);
  --fg-mute: var(--nbs-forest-600);
  --rule: rgba(3, 26, 15, 0.24);
}

/* ============================================================
   4. Semantic type classes
   ============================================================ */

/* H1 / display — ExtraBold uppercase, tight tracking.
   Reserved for the wordmark and hero titles. */
.nbs h1, .nbs .h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-extra);
  font-size: clamp(42px, 5.2vw, 72px);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  margin: 0;
}

/* H2 — Bold, mixed case, deck-section title size. */
.nbs h2, .nbs .h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 32px;
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  margin: 0;
}

/* H3 — SemiBold, the long-form section head used on body slides.
   Was 36/Medium and overlapped .lead; bumped to 28/SemiBold so the
   two roles read as different things. */
.nbs h3, .nbs .h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: 28px;
  line-height: var(--lh-heading);
  margin: 0;
}

/* H4 — Bold 18, card titles. */
.nbs h4, .nbs .h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 18px;
  line-height: var(--lh-heading);
  margin: 0;
}

/* Lead — the 42px medium quote/intro weight that runs across hero
   slides and body intro paragraphs. */
.nbs .lead {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: 42px;
  line-height: var(--lh-display);
  margin: 0;
}

/* Body — 21px on slides, 16–18 on web. */
.nbs p, .nbs .body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: 21px;
  line-height: var(--lh-heading);
  color: var(--fg-mute);
  margin: 0;
}

/* Small — dense service-list copy on the deck. */
.nbs .small {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: 14px;
  line-height: var(--lh-body);
  color: var(--fg-mute);
}

/* Eyebrow — ALL CAPS micro-label, ExtraBold. */
.nbs .eyebrow {
  font-family: var(--font-display);
  font-weight: var(--fw-extra);
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Link — underlined, inherits color, hovers to accent. */
.nbs a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.16em;
  text-decoration-thickness: 1.5px;
  transition: color var(--dur-fast) var(--ease-out);
}
.nbs a:hover { color: var(--accent); }

/* Keyboard focus ring on any focusable element inside .nbs */
.nbs :where(a, button, [role="button"], input, textarea, select):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 4px;
}

/* ============================================================
   5. Surface utilities

   Tokens for surfaces existed but the only utilities shipped were
   .nbs--light / .nbs--leaf. These cover the in-between cases that
   slides and the marketing kit kept inlining.
   ============================================================ */

.surface-card {
  background: var(--bg-overlay);
  color: var(--fg);
}
.surface-sunken {
  background: var(--bg-sunken);
  color: var(--fg);
}
.surface-elevated {
  background: var(--bg-elevated);
  color: var(--fg);
}
.surface-glass {
  background: var(--bg-glass);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  color: var(--fg);
}
.surface-overlay {
  background: var(--bg-overlay-soft);
  color: var(--fg);
}
.surface-leaf {
  background: var(--accent);
  color: var(--on-accent);
}