/* ============================================================
   S-PRO — Spacing, radii, borders, shadows, layout, motion
   Sharp corners. Hairline dividers. Whitespace is the system.
   Shadows are nearly absent — the brand is flat & editorial.
   ============================================================ */

:root {
  /* ---- Spacing scale (4px base) --------------------------- */
  --space-0:   0;
  --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-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;
  --space-40:  160px;

  /* Section rhythm — generous vertical breathing room */
  --section-gap:      120px;   /* between major page sections */
  --section-gap-sm:   80px;
  --block-gap:        48px;

  /* ---- Radii ---------------------------------------------- *
     The brand is SHARP. Default is 0. A 2px hint exists only
     for incidental chips; pills are reserved for circular
     icon buttons / nav arrows.                               */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-pill: 999px;   /* circular icon buttons & dots only */

  /* ---- Border widths -------------------------------------- */
  --border-thin:   1px;
  --border-medium: 1.5px;

  /* ---- Shadows --------------------------------------------- *
     Used almost nowhere. Only specimen swatches / floating
     menus get the faintest lift. No glow, no soft cards.     */
  --shadow-none: none;
  --shadow-card: 0 0 0.5px 0 rgba(66,71,76,0.32), 0 4px 8px 0 rgba(66,71,76,0.05);
  --shadow-menu: 0 12px 32px -8px rgba(23,23,28,0.14), 0 0 0 1px rgba(23,23,28,0.04);

  /* ---- Layout --------------------------------------------- */
  --container-max:   1280px;
  --container-pad:   80px;     /* desktop gutter */
  --container-pad-sm: 24px;    /* mobile gutter  */

  /* Label-left / content-right grid (the signature one-pager
     pattern). Label column is fixed & narrow; content fills. */
  --grid-label-col:  220px;
  --grid-gap:        64px;

  /* Decorative magenta dot used in tags / section labels */
  --dot-size:        10px;
  --dot-size-lg:     16px;

  /* ---- Motion --------------------------------------------- *
     Restrained. Quick opacity / color fades, subtle moves.
     No bounce, no spring, no decorative looping animation.   */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);/* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);/* @kind other */
  --dur-fast:      120ms;/* @kind other */
  --dur-base:      200ms;/* @kind other */
  --dur-slow:      320ms;/* @kind other */
}