/* ============================================================================
   PreBizSys Design Tokens — v1.0 (hero-proof, M1-S122)
   ----------------------------------------------------------------------------
   The DESIGN-LOCK token spine. Plain CSS custom properties — NO ACSS / Frames.
   Every value here maps 1:1 to a Bricks setting (see design-notes.md §"Bricks map").
   Palette = R-C Option A (Graphite + Safety-Orange). Type = R-C recommended.
   Source of truth for color, type scale, spacing, radius, shadow, motion.
   When this is locked, style changes become costed change-requests, not free
   iterations (SYNTHESIS G1/G2).
   ========================================================================= */

:root {
  /* --- COLOR ------------------------------------------------------------- */
  /* Ink / neutrals (the dependable industrial system) */
  --pbs-graphite:      #1C2126;  /* primary ink: headlines, dark sections, footer, body-on-light */
  --pbs-steel:         #2D343C;  /* secondary dark panels, nav-on-scroll */
  --pbs-concrete:      #6B7280;  /* captions, borders, muted text */
  --pbs-offwhite:      #F7F7F5;  /* page background */
  --pbs-white:         #FFFFFF;  /* cards, content panels */

  /* Accent / action (the one decisive safety accent — reserved for CTAs + key marks) */
  --pbs-orange:        #F25C05;  /* primary CTA, key highlight, the accent name-syllable */
  --pbs-orange-deep:   #C9430A;  /* CTA hover / active */

  /* Status (used sparingly — proof signals only) */
  --pbs-green:         #1F9D55;  /* "live" status tags, verified-proof ticks */

  /* Semantic roles (build against THESE, not raw hexes) */
  --pbs-bg:            var(--pbs-graphite);   /* hero ground = dark, premium */
  --pbs-bg-alt:        var(--pbs-offwhite);   /* light sections elsewhere on the site */
  --pbs-surface:       var(--pbs-white);
  --pbs-text:          #EDEEF0;               /* body text on dark ground (graphite-tuned off-white) */
  --pbs-text-on-light: var(--pbs-graphite);
  --pbs-text-muted:    #A6ACB4;               /* muted text on dark ground */
  --pbs-border:        rgba(255,255,255,0.10);/* hairline dividers on dark */
  --pbs-action:        var(--pbs-orange);
  --pbs-action-hover:  var(--pbs-orange-deep);
  --pbs-on-action:     var(--pbs-white);      /* text on the orange CTA (passes AA at button size) */

  /* --- TYPE -------------------------------------------------------------- */
  /* Display = confident geometric grotesk; Body = humanist sans; Mono = data/numbers.
     Self-hosting-ready font stacks with robust system fallbacks so the file
     renders standalone with NO network call (the @import below is progressive
     enhancement only — strip it for the Bricks build and self-host). */
  --pbs-font-display: "Space Grotesk", "Archivo", "Prompt", -apple-system,
                      BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --pbs-font-body:    "Inter", "Karla", -apple-system, BlinkMacSystemFont,
                      "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --pbs-font-mono:    "Space Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Fluid type scale (clamp = world-class responsive feel; min @ 360px → max @ 1440px) */
  --pbs-fs-eyebrow:   clamp(0.72rem, 0.68rem + 0.2vw, 0.82rem);
  --pbs-fs-body:      clamp(1rem,    0.96rem + 0.25vw, 1.125rem);
  --pbs-fs-lead:      clamp(1.15rem, 1.05rem + 0.55vw, 1.45rem);  /* subhead */
  --pbs-fs-h3:        clamp(1.3rem,  1.1rem + 1vw,     1.75rem);
  --pbs-fs-h2:        clamp(1.9rem,  1.4rem + 2.2vw,   2.85rem);
  --pbs-fs-h1:        clamp(2.6rem,  1.7rem + 4.6vw,   5rem);     /* the hero headline */

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

  --pbs-lh-tight:     1.04;   /* big display headlines */
  --pbs-lh-snug:      1.25;   /* subheads */
  --pbs-lh-body:      1.6;    /* running text */

  --pbs-ls-tight:     -0.02em;/* display tracking */
  --pbs-ls-wide:      0.14em; /* eyebrow / overline tracking */

  /* --- SPACING (8px base scale) ----------------------------------------- */
  --pbs-space-1:  0.25rem;  /*  4px */
  --pbs-space-2:  0.5rem;   /*  8px */
  --pbs-space-3:  0.75rem;  /* 12px */
  --pbs-space-4:  1rem;     /* 16px */
  --pbs-space-5:  1.5rem;   /* 24px */
  --pbs-space-6:  2rem;     /* 32px */
  --pbs-space-7:  3rem;     /* 48px */
  --pbs-space-8:  4rem;     /* 64px */
  --pbs-space-9:  6rem;     /* 96px */
  --pbs-space-10: 8rem;     /* 128px */

  /* --- LAYOUT ------------------------------------------------------------ */
  --pbs-container:     1200px;  /* max content width */
  --pbs-container-pad: clamp(1.25rem, 0.5rem + 3.5vw, 3rem);

  /* --- RADIUS / BORDER --------------------------------------------------- */
  --pbs-radius-sm: 4px;
  --pbs-radius:    8px;
  --pbs-radius-lg: 14px;
  --pbs-radius-pill: 999px;

  /* --- ELEVATION -------------------------------------------------------- */
  --pbs-shadow-sm: 0 1px 2px rgba(0,0,0,0.20);
  --pbs-shadow:    0 10px 30px rgba(0,0,0,0.35);
  --pbs-shadow-cta:0 8px 24px rgba(242,92,5,0.32);  /* warm glow under the orange CTA */

  /* --- MOTION (crafted entrance + decisive micro-interactions) ---------- */
  /* Two easing personalities: a confident decelerate for entrances (overshoot-
     free, "settles into place"), and a springy ease for hover/active nudges. */
  --pbs-ease:        cubic-bezier(0.22, 1, 0.36, 1);   /* decelerate — content arrives */
  --pbs-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);/* gentle overshoot — hover pop */
  --pbs-dur-fast:    140ms;
  --pbs-dur:         260ms;
  --pbs-dur-slow:    420ms;   /* hover lifts that should read as deliberate */
  /* Entrance choreography — a longer, more crafted staggered rise than the
     "very subtle" first pass. Bigger move, longer duration, stronger easing. */
  --pbs-enter-dur:   820ms;   /* per-block rise duration (was 700ms) */
  --pbs-enter-move:  26px;    /* per-block rise distance  (was 16px) */
  --pbs-enter-step:  110ms;   /* delay between staggered blocks */

  /* --- HERO VERTICAL RHYTHM (viewport-fit spacing) ----------------------
     Hero-scoped gaps that compress on short viewports so the WHOLE hero —
     nav + eyebrow + headline + subhead + pillars + CTA + $1,500 + proof —
     fits inside 100dvh at 1440×900 with nothing cut. Each scales with both
     width (vw) and height (vh) so it tightens on a short laptop and opens up
     on a tall display, never trimming approved copy. */
  /* BREATHING ROOM (M1 2026-06-05): gaps opened up for a calmer, more premium
     rhythm. The copy trims (shorter Free-line, tighter subhead, dropped field
     label) free the vertical room these larger gaps spend; still vh-aware so a
     short laptop compresses and the whole hero holds inside 100dvh at 1440×900. */
  --pbs-hero-gap-eyebrow: clamp(1.1rem, 0.6rem + 1.6vh, 2rem);    /* eyebrow → title */
  --pbs-hero-gap-title:   clamp(1.2rem, 0.6rem + 1.9vh, 2.25rem); /* title → subhead */
  --pbs-hero-gap-sub:     clamp(1.4rem, 0.7rem + 2.4vh, 2.75rem); /* subhead → capture */
  --pbs-hero-gap-pillars: clamp(1.4rem, 0.7rem + 2.4vh, 2.75rem); /* (legacy slot) */
  --pbs-hero-gap-proof:   clamp(1.4rem, 0.5rem + 2.6vh, 3rem);    /* actions → proof rule */
  /* Hero headline tuned to FIT a 3-line wrap within 100dvh at 1440×900 while
     staying impactful. Height-aware: caps lower on short viewports. */
  --pbs-fs-h1-hero:       clamp(2.5rem, 1.4rem + 3.4vw + 0.8vh, 4.35rem);
}

/* Self-host these in the Bricks build; the @import is progressive enhancement
   so the standalone file looks polished if online, and degrades to the strong
   system-font fallbacks above if offline. Non-blocking by spec (fonts swap). */
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap");