/* ============================================================
   PRIMEWAYS — SPACING, RADII, SHADOWS, LAYOUT
   ============================================================ */
:root {
  /* spacing scale (4px base) */
  --space-1:  0.25rem;   /* 4 */
  --space-2:  0.5rem;    /* 8 */
  --space-3:  0.75rem;   /* 12 */
  --space-4:  1rem;      /* 16 */
  --space-5:  1.5rem;    /* 24 */
  --space-6:  2rem;      /* 32 */
  --space-7:  3rem;      /* 48 */
  --space-8:  4rem;      /* 64 */
  --space-9:  6rem;      /* 96 */
  --space-10: 8rem;      /* 128 */

  /* radii — practical, trade-led: small and squared, not pill-soft */
  --radius-xs:  2px;
  --radius-sm:  4px;
  --radius-md:  6px;
  --radius-lg:  10px;
  --radius-xl:  16px;
  --radius-pill:999px;

  /* borders */
  --border-width: 1px;
  --border-width-strong: 2px;
  --rule-accent-width: 4px;   /* the chunky blue/yellow underline accent */

  /* shadows — grounded, low-blur (built, not floaty) */
  --shadow-xs: 0 1px 2px rgba(15,15,15,0.08);
  --shadow-sm: 0 1px 3px rgba(15,15,15,0.10), 0 1px 2px rgba(15,15,15,0.06);
  --shadow-md: 0 4px 12px rgba(15,15,15,0.10), 0 2px 4px rgba(15,15,15,0.06);
  --shadow-lg: 0 14px 30px rgba(15,15,15,0.14), 0 4px 8px rgba(15,15,15,0.08);
  --shadow-card-hover: 0 18px 38px rgba(26,42,85,0.18);

  /* layout */
  --container-max: 1200px;
  --container-wide:1360px;
  --gutter: clamp(1rem, 0.5rem + 3vw, 3rem); /* @kind spacing */
  --section-y: clamp(3.5rem, 2rem + 6vw, 7rem); /* @kind spacing */

  /* motion */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur: 200ms; /* @kind other */
  --dur-slow: 360ms; /* @kind other */

  /* overlay for image text protection */
  --overlay-tarmac: linear-gradient(180deg, rgba(15,15,15,0) 0%, rgba(15,15,15,0.78) 100%); /* @kind color */
  --overlay-brand:  linear-gradient(115deg, rgba(26,42,85,0.92) 0%, rgba(31,79,163,0.72) 100%); /* @kind color */
}