/* ============================================================
   ControlSolar — SPACING, SIZING & LAYOUT TOKENS
   Base unit 4px. Generous whitespace is a brand value.
   ============================================================ */
:root {
  --space-0:   0;
  --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:   2.5rem;   /* 40px */
  --space-8:   3rem;     /* 48px */
  --space-10:  4rem;     /* 64px */
  --space-12:  5rem;     /* 80px */
  --space-16:  7rem;     /* 112px */
  --space-20:  9rem;     /* 144px — section rhythm on desktop */

  /* --- Section padding (vertical rhythm) --- */
  --section-y:        clamp(2.5rem, 1.5rem + 3.5vw, 5rem);    /* @kind spacing */
  --section-y-tight:  clamp(2.5rem, 1.5rem + 4vw, 5rem);   /* @kind spacing */

  /* --- Container widths --- */
  --container:       1200px;  /* default max content width */
  --container-wide:  1340px;
  --container-narrow: 760px;  /* prose / forms */
  --gutter:          clamp(1.25rem, 0.5rem + 3vw, 2.5rem);  /* @kind spacing */

  /* --- Component sizing --- */
  --control-h-sm:  36px;
  --control-h-md:  44px;  /* default — mobile hit target floor */
  --control-h-lg:  54px;
  --control-h-xl:  64px;  /* hero CTA */

  /* --- Fixed mobile CTA bar --- */
  --mobile-cta-h:  68px;
}