/*!
 * Oisix Design Tokens - Semantic Spacing (SP / App mode)
 * Generated from the Figma "spacing-semantic" collection (SP mode).
 *
 * Source of truth is Figma. Do NOT hand-edit values here; regenerate from Figma.
 *
 * Semantic spacing is responsive (SP != PC), and Oisix SP/PC is decided
 * server-side by screenmode (toSp/toPc), NOT by viewport width - so a media
 * query cannot express it. Instead SP/PC are split into two files, each loaded
 * only by its own head. This file is loaded by the SP/App head
 * (smart/base/head_info.jsp), right after design-tokens.css.
 *
 * Requires the spacing primitives (--spacing-*) defined in design-tokens.css.
 */

:root {
  /* ===== Semantic : Spacing (SP) ===== */
  --space-item:       var(--spacing-16);  /* gap between items */
  --space-group:      var(--spacing-24);  /* gap between groups */
  --space-section:    var(--spacing-40);  /* gap between sections */
  --space-section-xl: var(--spacing-64);  /* gap between large sections */
  --space-stack:      var(--spacing-12);  /* vertical stack gap */
  --space-inline:     var(--spacing-8);   /* inline gap */
  --space-inline-sm:  var(--spacing-4);   /* small inline gap */
  --space-side:       var(--spacing-16);  /* screen side padding */
}