/* ==========================================================================
   JS Construction — shared design tokens
   Colors sampled from the logo. Used by all 8 concepts + the hub.
   Single source of truth for color, space, radius, shadow, type scale.
   ========================================================================== */
:root{
  /* --- Brand color (from the logo) --- */
  --js-black:      #0A0A0A; /* logo black; primary dark bg */
  --js-ink:        #141414; /* raised dark surface */
  --js-charcoal:   #1F1F1F; /* cards on dark */
  --js-white:      #FFFFFF;
  --js-paper:      #F5F5F2; /* warm off-white light bg */
  --js-stone:      #E6E6E1; /* dividers on light */
  --js-gray:       #5C5C5C; /* body text on light — 6.7:1 on white */
  --js-gray-light: #A3A3A3; /* secondary text on dark — 7.8:1 on black */

  --js-green:      #006B0A; /* logo green (white-bg version) — text/buttons on light: 6.8:1 on white */
  --js-green-deep: #005808; /* hover/pressed on light */
  --js-green-logo: #008A12; /* logo green (black-bg version) — large shapes, rules, icons on dark */
  --js-green-glow: #22B33A; /* green TEXT on black — 7.1:1; small text/links on dark */

  /* placeholder-highlight accent (amber) */
  --js-amber:      #B45309; /* dashed .ph outline — AA on paper/white */
  --js-amber-bg:   rgba(217,119,6,.10);

  /* --- Spacing scale (8pt-ish) --- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 96px; --sp-10: 128px;

  /* --- Radii --- */
  --r-sm: 4px; --r-md: 8px; --r-lg: 14px; --r-xl: 22px; --r-pill: 999px;

  /* --- Shadows --- */
  --sh-sm: 0 1px 2px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.10);
  --sh-md: 0 4px 10px rgba(0,0,0,.10), 0 2px 4px rgba(0,0,0,.08);
  --sh-lg: 0 14px 40px rgba(0,0,0,.16), 0 4px 10px rgba(0,0,0,.10);
  --sh-dark: 0 14px 40px rgba(0,0,0,.55), 0 3px 10px rgba(0,0,0,.4);

  /* --- Layout --- */
  --container: 1200px;
  --container-narrow: 940px;
  --container-wide: 1440px;

  /* --- Type scale (fluid) --- */
  --fs-eyebrow: .78rem;
  --fs-body: 1.0625rem;      /* ~17px, >=16 */
  --fs-lg: 1.25rem;
  --fs-h3: clamp(1.25rem, 1rem + 1.2vw, 1.6rem);
  --fs-h2: clamp(1.7rem, 1.2rem + 2.4vw, 2.6rem);
  --fs-h1: clamp(2.3rem, 1.4rem + 4.4vw, 4rem);
  --fs-display: clamp(2.8rem, 1.2rem + 7vw, 6rem);
  --lh-body: 1.6;
  --lh-tight: 1.08;

  /* --- Motion --- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: .32s;

  /* --- Z-index --- */
  --z-header: 100;
  --z-stickybar: 120;
  --z-backpill: 110;
  --z-modal: 200;
}