/* ==========================================================================
   SPACING — Canon Website OS
   ==========================================================================
   Ground truth: CANON_WEBSITE_DESIGN_OS.txt §10 —
     "Section spacing: ~96 desktop / ~56 mobile"
     "Desktop width: 1440 with ~80px side padding"
     "Mobile width: 390 with ~20px padding"
     "Primary button min height: 48px"
   The base 4px scale below is this system's own addition so every component
   shares one rhythm; the semantic rows at the bottom are the OS's literal
   numbers.
   ========================================================================== */

:root {
  --space-0:  0px;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ---- semantic (OS §10 literal values) ---- */
  --section-spacing-desktop:    var(--space-24); /* 96 */
  --section-spacing-mobile:      var(--space-14); /* 56 */
  --container-padding-desktop:  var(--space-20); /* 80 */
  --container-padding-mobile:    var(--space-5);  /* 20 */
  --control-height-min:          48px;             /* primary button min height */

  /* ---- component-level rhythm (this system's addition) ---- */
  --gap-card-padding:    var(--space-6);   /* 24 — inside cards/panels */
  --gap-stack-tight:      var(--space-2);   /* 8  — label + input, icon + label */
  --gap-stack:            var(--space-4);   /* 16 — related fields, list items */
  --gap-stack-loose:      var(--space-8);   /* 32 — subsections within a block */
  --gap-inline:           var(--space-2);   /* 8  — inline icon/text pairs */
}