/* Blue Bridge Logic — spacing, layout & shape tokens */
:root {
  /* ---- Spacing scale (4px base) ---- */
  --space-1:  0.25rem;  /*   4px */
  --space-2:  0.5rem;   /*   8px */
  --space-3:  0.75rem;  /*  12px */
  --space-4:  1rem;     /*  16px */
  --space-5:  1.5rem;   /*  24px */
  --space-6:  2rem;     /*  32px */
  --space-7:  3rem;     /*  48px */
  --space-8:  4rem;     /*  64px */
  --space-9:  6rem;     /*  96px */
  --space-10: 8rem;     /* 128px */

  /* ---- Containers ---- */
  --container-text:    44rem;  /*  704px — long-form reading */
  --container-content: 67.5rem;/* 1080px — default page content */
  --container-wide:    75rem;  /* 1200px — full marketing sections */
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  /* ---- Radii (quiet, craftsman — never bubbly) ---- */
  --radius-sm:   4px;   /* inputs, badges, small controls */
  --radius-md:   6px;   /* buttons, cards */
  --radius-lg:   10px;  /* large feature cards, images */
  --radius-pill: 999px; /* tags only */

  /* ---- Elevation: soft daylight shadows (low contrast, blue-gray, never black) ---- */
  --shadow-1: 0 1px 2px rgba(29, 45, 60, 0.07);
  --shadow-2: 0 2px 6px rgba(29, 45, 60, 0.05), 0 10px 28px rgba(29, 45, 60, 0.08);
  --shadow-3: 0 4px 12px rgba(29, 45, 60, 0.07), 0 20px 48px rgba(29, 45, 60, 0.10);

  /* ---- Bridge span (signature divider) ---- */
  --span-chord: 2px;                 /* the deck line */
  --span-tick-w: 1.5px;              /* truss post width */
  --span-tick-h: 8px;                /* truss post height */
  --span-gap: 12px;                  /* post spacing */
  --span-color: var(--blue-300);

  /* ---- Motion (calm: fades and small slides; no bounces) ---- */
  --ease-out: cubic-bezier(0.25, 0.6, 0.3, 1);
  --duration-fast: 140ms;
  --duration-base: 220ms;
}