2026-04-01 12:26:29 +00:00
25 changed files with 625 additions and 526 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,36 @@

 All notable changes to Armature are documented here.

+## v0.6.13 — Responsive & Spacing
+
+Spacing token scale and tablet breakpoint. All kernel CSS and extension
+packages migrated from hardcoded values to design tokens.
+
+### Added
+
+- **Spacing tokens** (`--sp-1` through `--sp-12`) — 4px-grid scale in
+  `variables.css`. Nine stops: 4, 8, 12, 16, 20, 24, 32, 40, 48px.
+  Numeric naming (`--sp-N`), rem-based for zoom/font-size respect.
+- **Tablet breakpoint** (`max-width: 1024px`) — new responsive tier
+  between mobile (768px) and desktop. Secondary workspace pane narrows
+  to 360px, admin sidebar to 120px, settings/admin/editor navs shrink.
+- **Breakpoint documentation** in `EXTENSION-CSS.md` — Mobile (768px),
+  Tablet (1024px), Desktop (default).
+- **Spacing guidelines** in `EXTENSION-CSS.md` — token table with
+  computed pixel values and usage examples.
+
+### Changed
+
+- **8 kernel CSS files** migrated to spacing tokens — `sw-primitives.css`,
+  `modals.css`, `surfaces.css`, `layout.css`, `sw-shell.css`,
+  `primitives.css`, `user-menu.css`, `sw-login.css`. Hardcoded padding,
+  margin, and gap values replaced with `var(--sp-N)`.
+- **12 extension packages** migrated — chat, dashboard, editor,
+  git-board, hello-dashboard, icd-test-runner, notes, schedules,
+  sdk-test-runner, tasks, team-activity-log, workflow-demo.
+- **Login hero breakpoint** normalized from 900px to 1024px (tablet).
+- **Notes mobile breakpoint** normalized from 700px to 768px (standard).
+
 ## v0.6.12 — Extension CSS Isolation

 Prefix enforcement prevents extension CSS from leaking into the kernel or
--- a/ROADMAP-UI.md
+++ b/ROADMAP-UI.md
@@ -75,16 +75,13 @@ See CHANGELOG.md.
 | Kernel CSS contract | `docs/EXTENSION-CSS.md` — stable public classes (`.sw-btn--*`, `.sw-input`, `.sw-field`, `.sw-dialog`, `.sw-toast`, `.sw-menu`, `.sw-tabs`, etc.) and all CSS variables. Everything else internal. |
 | Migrate in-tree packages | `data-ext="{{.Surface}}"` on extension mount. All 12 packages prefixed to `.ext-{slug}-*`. CSS + JS updated in lockstep. |

-### v0.6.13 — Responsive & Spacing
+### v0.6.13 — Responsive & Spacing ✅

-Fill the gaps between mobile and desktop.
-
-| Step | Description |
-|------|-------------|
-| Tablet breakpoint | Add `@media (min-width: 769px) and (max-width: 1024px)` rules. Secondary workspace pane: `360px` (from `480px`). Admin nav collapses to icon-only at this breakpoint. Settings nav: `180px`. |
-| Spacing scale | Define spacing tokens in `variables.css`: `--space-1: 4px` through `--space-8: 64px` (4px base, doubling). Migrate hardcoded padding/margin values to tokens. Priority: surfaces that users see on every session (sidebar, topbar, admin content areas). |
-| Font-size scale | Define `--text-xs: 0.75rem` through `--text-xl: 1.25rem` (5 stops). Migrate all font-size declarations. Remove `em`-based sizes (user-picker) and bare `px` sizes. |
-| Secondary pane responsive | `workspace-secondary.open` width uses `clamp(320px, 35vw, 560px)` instead of fixed `480px`. |
+Shipped. Spacing token scale (`--sp-1` through `--sp-12`, 4px grid) in
+`variables.css`. Tablet breakpoint (`max-width: 1024px`) in layout, surfaces,
+login. All kernel CSS and 12 in-tree packages migrated to spacing tokens.
+`EXTENSION-CSS.md` updated with spacing table and breakpoint guide.
+Font-size scale deferred to v0.6.14. See CHANGELOG.md.

 ### v0.6.14 — Visual Polish

@@ -123,7 +120,7 @@ v0.6.11 CSS Deduplication       ✅ SHIPPED
  ↓
 v0.6.12 Extension CSS Isolation ✅ SHIPPED
  ↓
-v0.6.13 Responsive & Spacing    ← Spacing tokens need stable class names to attach to
+v0.6.13 Responsive & Spacing    ✅ SHIPPED
  ↓
 v0.6.14 Visual Polish           ← Final visual pass after structure is locked
  ↓
--- a/ROADMAP.md
+++ b/ROADMAP.md
@@ -1,6 +1,6 @@
 # Armature — Roadmap

-## Current: v0.6.12 — Extension CSS Isolation
+## Current: v0.6.13 — Responsive & Spacing

 Self-hosted extensible platform. Auth, identity, packages, Starlark sandbox,
 storage, realtime, and ops are kernel primitives. Everything else is an extension.
--- a/2
+++ b/2
@@ -1 +1 @@
-0.6.12
+0.6.13
--- a/docs/EXTENSION-CSS.md
+++ b/docs/EXTENSION-CSS.md
@@ -1,6 +1,6 @@
 # Extension CSS Contract

-> **Version**: v0.6.12 — Extension CSS Isolation
+> **Version**: v0.6.13 — Responsive & Spacing

 This document defines the CSS contract between the Armature kernel and extension
 packages. Extensions **must** follow these rules; the kernel guarantees the listed
@@ -113,6 +113,34 @@ instead of hardcoded colors to respect the user's theme.
 | `--purple` | Purple accent |
 | `--purple-dim` | Dimmed purple background |

+### Spacing
+
+Use spacing tokens instead of hardcoded values for padding, margin, and gap.
+For sub-4px values (1px, 2px, 3px) used in borders and fine detail, hardcoded
+values are acceptable.
+
+| Variable | Value | Computed |
+|----------|-------|---------|
+| `--sp-1` | `0.25rem` | 4px |
+| `--sp-2` | `0.5rem` | 8px |
+| `--sp-3` | `0.75rem` | 12px |
+| `--sp-4` | `1rem` | 16px |
+| `--sp-5` | `1.25rem` | 20px |
+| `--sp-6` | `1.5rem` | 24px |
+| `--sp-8` | `2rem` | 32px |
+| `--sp-10` | `2.5rem` | 40px |
+| `--sp-12` | `3rem` | 48px |
+
+Example:
+
+```css
+.ext-my-app-card {
+    padding: var(--sp-3) var(--sp-4);   /* 12px 16px */
+    gap: var(--sp-2);                    /* 8px */
+    margin-bottom: var(--sp-4);          /* 16px */
+}
+```
+
 ### Layout & Typography

 | Variable | Purpose |
@@ -130,6 +158,22 @@ instead of hardcoded colors to respect the user's theme.

 ---

+## Responsive Breakpoints
+
+The kernel uses these standard breakpoints. Extensions should use the same
+values for consistency.
+
+| Name | Media Query | Use Case |
+|------|-------------|----------|
+| Mobile | `@media (max-width: 768px)` | Phone-sized, single column |
+| Tablet | `@media (max-width: 1024px)` | Tablet/small laptop, narrower sidebars |
+| Desktop | Default (no query) | Full layout |
+
+CSS custom properties cannot be used in `@media` queries — use the pixel
+values directly.
+
+---
+
 ## What Is Internal

 Everything not listed above is **internal kernel CSS** and may change between
--- a/packages/chat/css/main.css
+++ b/packages/chat/css/main.css
@@ -43,7 +43,7 @@
 .ext-chat-topbar__thread-title {
  font-weight: 600;
  font-size: 14px;
-  margin-right: 8px;
+  margin-right: var(--sp-2);
  color: var(--text-2);
 }

@@ -62,7 +62,7 @@
  display: flex;
  align-items: center;
  justify-content: space-between;
-  padding: 12px 16px;
+  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
 }

@@ -77,14 +77,14 @@
 }

 .ext-chat-sidebar__empty {
-  padding: 24px 16px;
+  padding: var(--sp-6) var(--sp-4);
  text-align: center;
  color: var(--text-3);
  font-size: 13px;
 }

 .ext-chat-sidebar__item {
-  padding: 10px 16px;
+  padding: var(--sp-3) var(--sp-4);
  cursor: pointer;
  border-bottom: 1px solid var(--border-light);
  transition: background 0.1s;
@@ -112,7 +112,7 @@
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
-  margin-right: 8px;
+  margin-right: var(--sp-2);
 }

 .ext-chat-sidebar__item-time {
@@ -124,7 +124,7 @@
 .ext-chat-sidebar__item-bottom {
  display: flex;
  align-items: center;
-  gap: 6px;
+  gap: var(--sp-2);
 }

 .ext-chat-sidebar__item-preview {
@@ -155,7 +155,7 @@

 .ext-chat-sidebar__search {
  position: relative;
-  padding: 8px 16px;
+  padding: var(--sp-2) var(--sp-4);
  border-bottom: 1px solid var(--border-light);
 }

@@ -163,7 +163,7 @@
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 6px;
-  padding: 6px 28px 6px 10px;
+  padding: var(--sp-2) var(--sp-6) var(--sp-2) var(--sp-3);
  font-size: 13px;
  font-family: inherit;
  background: var(--input-bg);
@@ -186,7 +186,7 @@
  color: var(--text-3);
  cursor: pointer;
  font-size: 16px;
-  padding: 0 4px;
+  padding: 0 var(--sp-1);
  line-height: 1;
 }

@@ -200,7 +200,7 @@
 }

 .ext-chat-sidebar__search-section {
-  padding: 8px 16px 4px;
+  padding: var(--sp-2) var(--sp-4) var(--sp-1);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
@@ -211,7 +211,7 @@
 .ext-chat-sidebar__search-loading {
  display: flex;
  justify-content: center;
-  padding: 16px;
+  padding: var(--sp-4);
 }

 .ext-chat-sidebar__item--search-msg .ext-chat-sidebar__item-preview {
@@ -241,22 +241,22 @@
 .ext-chat-thread__messages {
  flex: 1;
  overflow-y: auto;
-  padding: 16px;
+  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
-  gap: 4px;
+  gap: var(--sp-1);
 }

 .ext-chat-thread__loading {
  display: flex;
  justify-content: center;
-  padding: 24px;
+  padding: var(--sp-6);
 }

 .ext-chat-thread__loading-more {
  display: flex;
  justify-content: center;
-  padding: 8px;
+  padding: var(--sp-2);
 }

 .ext-chat-thread__load-more {
@@ -264,11 +264,11 @@
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
-  padding: 4px 12px;
+  padding: var(--sp-1) var(--sp-3);
  font-size: 12px;
  color: var(--text-2);
  cursor: pointer;
-  margin-bottom: 8px;
+  margin-bottom: var(--sp-2);
 }

 .ext-chat-thread__load-more:hover {
@@ -276,7 +276,7 @@
 }

 .ext-chat-thread__typing {
-  padding: 4px 16px 8px;
+  padding: var(--sp-1) var(--sp-4) var(--sp-2);
  font-size: 12px;
  color: var(--text-3);
  font-style: italic;
@@ -287,8 +287,8 @@
 .ext-chat-msg {
  display: flex;
  align-items: flex-start;
-  gap: 8px;
-  padding: 4px 0;
+  gap: var(--sp-2);
+  padding: var(--sp-1) 0;
  position: relative;
 }

@@ -321,7 +321,7 @@
  max-width: 65%;
  background: var(--bg-raised);
  border-radius: 12px;
-  padding: 8px 12px;
+  padding: var(--sp-2) var(--sp-3);
 }

 .ext-chat-msg--own .ext-chat-msg__body {
@@ -346,7 +346,7 @@

 .ext-chat-msg__meta {
  display: flex;
-  gap: 6px;
+  gap: var(--sp-2);
  align-items: center;
  margin-top: 2px;
 }
@@ -393,7 +393,7 @@
 .ext-chat-msg__action {
  background: none;
  border: none;
-  padding: 4px 6px;
+  padding: var(--sp-1) var(--sp-2);
  cursor: pointer;
  border-radius: 4px;
  font-size: 14px;
@@ -415,7 +415,7 @@
 .ext-chat-msg__edit {
  display: flex;
  flex-direction: column;
-  gap: 6px;
+  gap: var(--sp-2);
 }

 .ext-chat-msg__edit-input {
@@ -423,7 +423,7 @@
  min-width: 200px;
  border: 1px solid var(--border);
  border-radius: 6px;
-  padding: 6px 8px;
+  padding: var(--sp-2) var(--sp-2);
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
@@ -433,7 +433,7 @@

 .ext-chat-msg__edit-actions {
  display: flex;
-  gap: 6px;
+  gap: var(--sp-2);
  justify-content: flex-end;
 }

@@ -442,8 +442,8 @@
 .ext-chat-compose {
  display: flex;
  align-items: flex-end;
-  gap: 8px;
-  padding: 12px 16px;
+  gap: var(--sp-2);
+  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--border);
  background: var(--bg);
 }
@@ -452,7 +452,7 @@
  flex: 1;
  border: 1px solid var(--border);
  border-radius: 8px;
-  padding: 8px 12px;
+  padding: var(--sp-2) var(--sp-3);
  font-size: 14px;
  font-family: inherit;
  resize: none;
@@ -483,7 +483,7 @@
  display: flex;
  align-items: center;
  justify-content: space-between;
-  padding: 12px 16px;
+  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  font-size: 13px;
@@ -492,14 +492,14 @@
 .ext-chat-participants__list {
  flex: 1;
  overflow-y: auto;
-  padding: 8px 0;
+  padding: var(--sp-2) 0;
 }

 .ext-chat-participants__item {
  display: flex;
  align-items: center;
-  gap: 8px;
-  padding: 6px 16px;
+  gap: var(--sp-2);
+  padding: var(--sp-2) var(--sp-4);
 }

 .ext-chat-participants__name {
@@ -514,7 +514,7 @@
  font-size: 10px;
  color: var(--accent);
  font-weight: 600;
-  margin-left: 4px;
+  margin-left: var(--sp-1);
 }

 .ext-chat-participants__status {
@@ -535,7 +535,7 @@
  color: var(--text-3);
  cursor: pointer;
  font-size: 16px;
-  padding: 0 4px;
+  padding: 0 var(--sp-1);
  line-height: 1;
 }

@@ -548,19 +548,19 @@
 .ext-chat-new {
  display: flex;
  flex-direction: column;
-  gap: 12px;
+  gap: var(--sp-3);
  min-width: 320px;
 }

 .ext-chat-new__type {
  display: flex;
-  gap: 16px;
+  gap: var(--sp-4);
 }

 .ext-chat-new__type label {
  display: flex;
  align-items: center;
-  gap: 6px;
+  gap: var(--sp-2);
  font-size: 13px;
  cursor: pointer;
 }
@@ -568,7 +568,7 @@
 .ext-chat-new__title {
  border: 1px solid var(--border);
  border-radius: 6px;
-  padding: 8px 10px;
+  padding: var(--sp-2) var(--sp-3);
  font-size: 14px;
  font-family: inherit;
  background: var(--input-bg);
@@ -578,18 +578,18 @@
 .ext-chat-new__selected {
  display: flex;
  flex-wrap: wrap;
-  gap: 6px;
+  gap: var(--sp-2);
 }

 .ext-chat-new__chip {
  display: inline-flex;
  align-items: center;
-  gap: 4px;
+  gap: var(--sp-1);
  background: var(--accent-dim);
  color: var(--accent);
  font-size: 12px;
  font-weight: 500;
-  padding: 3px 8px;
+  padding: 3px var(--sp-2);
  border-radius: 12px;
 }

--- a/packages/dashboard/css/main.css
+++ b/packages/dashboard/css/main.css
@@ -18,8 +18,8 @@
 .ext-dashboard-topbar {
    display: flex;
    align-items: center;
-    gap: 12px;
-    padding: 0 16px;
+    gap: var(--sp-3);
+    padding: 0 var(--sp-4);
    height: 44px;
    flex-shrink: 0;
    background: var(--bg-secondary);
@@ -29,12 +29,12 @@
 .ext-dashboard-topbar-back {
    display: flex;
    align-items: center;
-    gap: 4px;
+    gap: var(--sp-1);
    color: var(--text-2);
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
-    padding: 4px 8px;
+    padding: var(--sp-1) var(--sp-2);
    border-radius: var(--radius);
    transition: color 0.15s, background 0.15s;
 }
@@ -84,7 +84,7 @@
 .ext-dashboard-main {
    flex: 1;
    overflow-y: auto;
-    padding: 20px;
+    padding: var(--sp-5);
    min-width: 0;
 }

@@ -92,20 +92,20 @@
    font-size: 18px;
    font-weight: 600;
    color: var(--text);
-    margin-bottom: 4px;
+    margin-bottom: var(--sp-1);
 }

 .ext-dashboard-subtitle {
    font-size: 13px;
    color: var(--text-3);
-    margin-bottom: 20px;
+    margin-bottom: var(--sp-5);
 }

 .ext-dashboard-filter-bar {
    display: flex;
    align-items: center;
-    gap: 12px;
-    margin-bottom: 16px;
+    gap: var(--sp-3);
+    margin-bottom: var(--sp-4);
 }

 .ext-dashboard-filter-label {
@@ -121,17 +121,17 @@
 .ext-dashboard-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-    gap: 12px;
+    gap: var(--sp-3);
 }

 .ext-dashboard-card {
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
-    padding: 16px;
+    padding: var(--sp-4);
    display: flex;
    flex-direction: column;
-    gap: 8px;
+    gap: var(--sp-2);
    transition: border-color 0.15s;
 }

@@ -142,7 +142,7 @@
 .ext-dashboard-card-header {
    display: flex;
    align-items: center;
-    gap: 8px;
+    gap: var(--sp-2);
 }

 .ext-dashboard-card-title {
@@ -169,21 +169,21 @@
 .ext-dashboard-card-actions {
    display: flex;
    justify-content: flex-end;
-    margin-top: 4px;
+    margin-top: var(--sp-1);
 }

 .ext-dashboard-empty {
    text-align: center;
    color: var(--text-3);
    font-size: 13px;
-    padding: 40px 20px;
+    padding: var(--sp-10) var(--sp-5);
 }

 /* ── Admin Section ───────────────────────── */

 .ext-dashboard-admin-section {
-    margin-top: 24px;
-    padding-top: 16px;
+    margin-top: var(--sp-6);
+    padding-top: var(--sp-4);
    border-top: 1px solid var(--border);
 }

@@ -193,5 +193,5 @@
    color: var(--text-2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
-    margin-bottom: 12px;
+    margin-bottom: var(--sp-3);
 }
--- a/packages/editor/css/main.css
+++ b/packages/editor/css/main.css
@@ -21,8 +21,8 @@
 .ext-editor-topbar {
    display: flex;
    align-items: center;
-    gap: 8px;
-    padding: 0 12px;
+    gap: var(--sp-2);
+    padding: 0 var(--sp-3);
    height: 40px;
    flex-shrink: 0;
    background: var(--bg-secondary, #151517);
@@ -35,12 +35,12 @@
 .ext-editor-topbar-back {
    display: flex;
    align-items: center;
-    gap: 4px;
+    gap: var(--sp-1);
    color: var(--text-3, #777);
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
-    padding: 4px 8px;
+    padding: var(--sp-1) var(--sp-2);
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
 }
@@ -71,14 +71,14 @@
 .ext-editor-ws-selector-btn {
    display: flex;
    align-items: center;
-    gap: 6px;
+    gap: var(--sp-2);
    background: none;
    border: 1px solid transparent;
    color: var(--text, #eee);
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
-    padding: 4px 8px;
+    padding: var(--sp-1) var(--sp-2);
    border-radius: 4px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
@@ -94,7 +94,7 @@
    position: absolute;
    top: 100%;
    left: 0;
-    margin-top: 4px;
+    margin-top: var(--sp-1);
    background: var(--bg-secondary, #1a1a1e);
    border: 1px solid var(--border, #2a2a2e);
    border-radius: 8px;
@@ -103,7 +103,7 @@
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
-    padding: 4px 0;
+    padding: var(--sp-1) 0;
 }

 .ext-editor-ws-dropdown.open { display: block; }
@@ -122,7 +122,7 @@
    color: var(--text, #eee);
    font-size: 12px;
    font-family: inherit;
-    padding: 8px 12px;
+    padding: var(--sp-2) var(--sp-3);
    cursor: pointer;
    transition: background 0.1s;
 }
@@ -139,22 +139,22 @@
 .ext-editor-ws-dropdown-divider {
    height: 1px;
    background: var(--border, #2a2a2e);
-    margin: 4px 0;
+    margin: var(--sp-1) 0;
 }

 .ext-editor-ws-new {
    display: flex;
    align-items: center;
-    gap: 6px;
+    gap: var(--sp-2);
    color: var(--accent, #b38a4e);
 }

 .ext-editor-topbar-branch {
    display: flex;
    align-items: center;
-    gap: 4px;
+    gap: var(--sp-1);
    background: var(--purple-dim, rgba(160, 120, 255, 0.1));
-    padding: 2px 8px;
+    padding: 2px var(--sp-2);
    border-radius: 4px;
 }

@@ -184,7 +184,7 @@

 .ext-editor-bootstrap-card {
    text-align: center;
-    padding: 40px;
+    padding: var(--sp-10);
    background: var(--bg-secondary, #151517);
    border: 1px solid var(--border, #2a2a2e);
    border-radius: 12px;
@@ -193,7 +193,7 @@

 .ext-editor-bootstrap-input {
    width: 100%;
-    padding: 8px 12px;
+    padding: var(--sp-2) var(--sp-3);
    background: var(--bg, #0e0e10);
    border: 1px solid var(--border, #2a2a2e);
    border-radius: 6px;
@@ -201,7 +201,7 @@
    font-size: 13px;
    font-family: inherit;
    outline: none;
-    margin-bottom: 12px;
+    margin-bottom: var(--sp-3);
    box-sizing: border-box;
 }

@@ -211,7 +211,7 @@

 .ext-editor-bootstrap-btn {
    width: 100%;
-    padding: 10px 16px;
+    padding: var(--sp-3) var(--sp-4);
    background: var(--accent, #b38a4e);
    color: #fff;
    border: none;
@@ -232,7 +232,7 @@
    align-items: center;
    justify-content: space-between;
    width: 100%;
-    padding: 10px 12px;
+    padding: var(--sp-3) var(--sp-3);
    background: var(--bg, #0e0e10);
    border: 1px solid var(--border, #2a2a2e);
    border-radius: 6px;
@@ -241,7 +241,7 @@
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
-    margin-bottom: 6px;
+    margin-bottom: var(--sp-2);
    text-align: left;
 }

@@ -271,8 +271,8 @@
 .ext-editor .file-tree-header {
    display: flex;
    align-items: center;
-    gap: 6px;
-    padding: 8px 12px;
+    gap: var(--sp-2);
+    padding: var(--sp-2) var(--sp-3);
    border-bottom: 1px solid var(--border, #2a2a2e);
 }

@@ -288,14 +288,14 @@
 .ext-editor .file-tree-items {
    flex: 1;
    overflow-y: auto;
-    padding: 4px 0;
+    padding: var(--sp-1) 0;
 }

 .ext-editor .file-tree-row {
    display: flex;
    align-items: center;
-    gap: 4px;
-    padding: 3px 8px;
+    gap: var(--sp-1);
+    padding: 3px var(--sp-2);
    cursor: pointer;
    font-size: 12px;
    color: var(--text-2, #999);
@@ -343,14 +343,14 @@
    background: var(--bg-secondary, #1a1a1e);
    border: 1px solid var(--border, #2a2a2e);
    border-radius: 6px;
-    padding: 4px 0;
+    padding: var(--sp-1) 0;
    min-width: 120px;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
 }

 .ext-editor-file-tree-ctx-item {
-    padding: 6px 12px;
+    padding: var(--sp-2) var(--sp-3);
    font-size: 12px;
    color: var(--text, #eee);
    cursor: pointer;
@@ -384,8 +384,8 @@
 .ext-editor .code-editor-tab {
    display: flex;
    align-items: center;
-    gap: 4px;
-    padding: 0 12px;
+    gap: var(--sp-1);
+    padding: 0 var(--sp-3);
    height: 100%;
    font-size: 12px;
    color: var(--text-3, #777);
@@ -409,7 +409,7 @@
    font-size: 12px;
    cursor: pointer;
    padding: 0 2px;
-    margin-left: 4px;
+    margin-left: var(--sp-1);
    border-radius: 2px;
    line-height: 1;
 }
@@ -442,8 +442,8 @@
 .ext-editor .code-editor-statusbar {
    display: flex;
    align-items: center;
-    gap: 16px;
-    padding: 0 12px;
+    gap: var(--sp-4);
+    padding: 0 var(--sp-3);
    height: 24px;
    flex-shrink: 0;
    background: var(--bg-secondary, #151517);
@@ -459,7 +459,7 @@
    background: var(--bg, #0e0e10);
    color: var(--text, #eee);
    border: none;
-    padding: 12px;
+    padding: var(--sp-3);
    font-family: var(--mono, 'SF Mono', monospace);
    font-size: 13px;
    resize: none;
@@ -504,24 +504,24 @@
 .ext-editor .ext-notes-toolbar {
    display: flex;
    flex-wrap: wrap;
-    gap: 4px;
-    padding: 6px 8px;
+    gap: var(--sp-1);
+    padding: var(--sp-2) var(--sp-2);
    border-bottom: 1px solid var(--border, #2a2a2e);
 }

 .ext-editor .ext-notes-toolbar .sw-btn--sm {
    font-size: 11px;
-    padding: 3px 6px;
+    padding: 3px var(--sp-2);
 }

 .ext-editor .ext-notes-search-row {
-    padding: 4px 8px;
+    padding: var(--sp-1) var(--sp-2);
 }

 .ext-editor .ext-notes-filter-row {
-    padding: 2px 8px 4px;
+    padding: 2px var(--sp-2) var(--sp-1);
    display: flex;
-    gap: 4px;
+    gap: var(--sp-1);
 }

 .ext-editor .ext-notes-filter-select {
--- a/packages/git-board/css/main.css
+++ b/packages/git-board/css/main.css
@@ -13,7 +13,7 @@
  display: flex;
  align-items: center;
  justify-content: space-between;
-  padding: 12px 16px;
+  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
 }
@@ -22,7 +22,7 @@
 .ext-git-board-header__right {
  display: flex;
  align-items: center;
-  gap: 10px;
+  gap: var(--sp-3);
 }

 .ext-git-board-title {
@@ -39,7 +39,7 @@
  color: var(--text);
  font-family: var(--mono);
  font-size: 13px;
-  padding: 5px 8px;
+  padding: 5px var(--sp-2);
  max-width: 260px;
 }

@@ -49,20 +49,20 @@
  max-width: 480px;
  margin: 60px auto;
  text-align: center;
-  padding: 0 16px;
+  padding: 0 var(--sp-4);
 }

 .ext-git-board-setup h2 {
  color: var(--text);
  font-size: 20px;
-  margin: 0 0 8px;
+  margin: 0 0 var(--sp-2);
 }

 .ext-git-board-setup p {
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.5;
-  margin: 0 0 20px;
+  margin: 0 0 var(--sp-5);
 }


@@ -75,8 +75,8 @@

 .ext-git-board-board {
  display: flex;
-  gap: 12px;
-  padding: 12px 16px;
+  gap: var(--sp-3);
+  padding: var(--sp-3) var(--sp-4);
  flex: 1;
  overflow-x: auto;
  overflow-y: hidden;
@@ -98,7 +98,7 @@
  display: flex;
  align-items: center;
  justify-content: space-between;
-  padding: 10px 12px;
+  padding: var(--sp-3) var(--sp-3);
  border-bottom: 1px solid var(--border);
 }

@@ -122,10 +122,10 @@
 .ext-git-board-column__cards {
  flex: 1;
  overflow-y: auto;
-  padding: 8px;
+  padding: var(--sp-2);
  display: flex;
  flex-direction: column;
-  gap: 6px;
+  gap: var(--sp-2);
 }

 /* ── Cards ───────────────────────────────── */
@@ -135,7 +135,7 @@
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
-  padding: 10px;
+  padding: var(--sp-3);
  text-decoration: none;
  color: var(--text);
  transition: border-color var(--transition), background var(--transition);
@@ -154,8 +154,8 @@
 .ext-git-board-card__header {
  display: flex;
  align-items: center;
-  gap: 6px;
-  margin-bottom: 4px;
+  gap: var(--sp-2);
+  margin-bottom: var(--sp-1);
 }

 .ext-git-board-card__number {
@@ -191,19 +191,19 @@
 .ext-git-board-card__labels {
  display: flex;
  flex-wrap: wrap;
-  gap: 4px;
-  margin-top: 6px;
+  gap: var(--sp-1);
+  margin-top: var(--sp-2);
 }

 .ext-git-board-card__labels .ext-git-board-badge {
  font-size: 10px;
-  padding: 1px 6px;
+  padding: 1px var(--sp-2);
 }

 .ext-git-board-card__meta {
  display: flex;
  justify-content: space-between;
-  margin-top: 6px;
+  margin-top: var(--sp-2);
  font-size: 11px;
  color: var(--text-3);
 }
@@ -247,7 +247,7 @@
  display: flex;
  align-items: flex-start;
  justify-content: center;
-  padding: 40px 16px;
+  padding: var(--sp-10) var(--sp-4);
  overflow-y: auto;
 }

@@ -268,7 +268,7 @@
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
-  padding: 16px 20px;
+  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
 }
@@ -276,7 +276,7 @@
 .ext-git-board-modal__title-row {
  display: flex;
  align-items: baseline;
-  gap: 8px;
+  gap: var(--sp-2);
  flex: 1;
  min-width: 0;
 }
@@ -295,7 +295,7 @@
  color: var(--text-3);
  font-size: 18px;
  cursor: pointer;
-  padding: 2px 6px;
+  padding: 2px var(--sp-2);
  border-radius: var(--radius);
  flex-shrink: 0;
 }
@@ -306,7 +306,7 @@

 .ext-git-board-modal__body {
  overflow-y: auto;
-  padding: 16px 20px;
+  padding: var(--sp-4) var(--sp-5);
  flex: 1;
  min-height: 0;
 }
@@ -314,9 +314,9 @@
 .ext-git-board-modal__meta {
  display: flex;
  align-items: center;
-  gap: 10px;
+  gap: var(--sp-3);
  flex-wrap: wrap;
-  margin-bottom: 12px;
+  margin-bottom: var(--sp-3);
  font-size: 12px;
  color: var(--text-2);
 }
@@ -336,8 +336,8 @@
 }

 .ext-git-board-modal__description {
-  margin-bottom: 20px;
-  padding-bottom: 16px;
+  margin-bottom: var(--sp-5);
+  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--border);
 }

@@ -367,13 +367,13 @@
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.03em;
-  margin: 0 0 12px;
+  margin: 0 0 var(--sp-3);
 }

 /* ── Comments ────────────────────────────── */

 .ext-git-board-comment {
-  padding: 10px 0;
+  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--border);
 }
 .ext-git-board-comment:last-child {
@@ -383,8 +383,8 @@
 .ext-git-board-comment__header {
  display: flex;
  align-items: baseline;
-  gap: 8px;
-  margin-bottom: 4px;
+  gap: var(--sp-2);
+  margin-bottom: var(--sp-1);
  font-size: 12px;
 }
 .ext-git-board-comment__header strong {
@@ -407,8 +407,8 @@
 /* ── Add Comment ─────────────────────────── */

 .ext-git-board-modal__add-comment {
-  margin-top: 16px;
-  padding-top: 16px;
+  margin-top: var(--sp-4);
+  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
 }

@@ -420,7 +420,7 @@
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
-  padding: 8px 10px;
+  padding: var(--sp-2) var(--sp-3);
  resize: vertical;
  outline: none;
  box-sizing: border-box;
@@ -431,8 +431,8 @@

 .ext-git-board-modal__actions {
  display: flex;
-  gap: 8px;
-  margin-top: 8px;
+  gap: var(--sp-2);
+  margin-top: var(--sp-2);
  justify-content: flex-end;
 }

--- a/packages/hello-dashboard/css/main.css
+++ b/packages/hello-dashboard/css/main.css
@@ -2,16 +2,16 @@
   Uses CSS custom properties from the platform theme system (variables.css).
   See EXTENSION-SURFACES.md for the full property reference. */

-.ext-hello-dashboard { max-width: 720px; margin: 0 auto; padding: 40px 24px; }
-.ext-hello-dashboard-header { margin-bottom: 32px; }
-.ext-hello-dashboard-header h1 { font-size: 28px; font-weight: 700; color: var(--text); margin: 0 0 8px 0; }
+.ext-hello-dashboard { max-width: 720px; margin: 0 auto; padding: var(--sp-10) var(--sp-6); }
+.ext-hello-dashboard-header { margin-bottom: var(--sp-8); }
+.ext-hello-dashboard-header h1 { font-size: 28px; font-weight: 700; color: var(--text); margin: 0 0 var(--sp-2) 0; }
 .ext-hello-dashboard-subtitle { font-size: 14px; color: var(--text-2); margin: 0; }
 .ext-hello-dashboard-subtitle code,
 .ext-hello-dashboard-card-value code { background: var(--bg-raised); padding: 2px 6px; border-radius: 4px; font-size: 13px; }
-.ext-hello-dashboard-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 24px; }
-.ext-hello-dashboard-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px; }
-.ext-hello-dashboard-card-title { font-size: 12px; font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
-.ext-hello-dashboard-card-value { font-size: 20px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
+.ext-hello-dashboard-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-6); }
+.ext-hello-dashboard-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--sp-4); }
+.ext-hello-dashboard-card-title { font-size: 12px; font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: var(--sp-2); }
+.ext-hello-dashboard-card-value { font-size: 20px; font-weight: 600; color: var(--text); margin-bottom: var(--sp-1); }
 .ext-hello-dashboard-card-detail { font-size: 12px; color: var(--text-3); }
-.ext-hello-dashboard-actions { display: flex; gap: 12px; margin-bottom: 24px; }
-.ext-hello-dashboard-manifest { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; font-size: 12px; color: var(--text-2); overflow-x: auto; white-space: pre-wrap; font-family: var(--mono); line-height: 1.5; }
+.ext-hello-dashboard-actions { display: flex; gap: var(--sp-3); margin-bottom: var(--sp-6); }
+.ext-hello-dashboard-manifest { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-4); font-size: 12px; color: var(--text-2); overflow-x: auto; white-space: pre-wrap; font-family: var(--mono); line-height: 1.5; }
--- a/packages/notes/css/main.css
+++ b/packages/notes/css/main.css
@@ -19,8 +19,8 @@
 .ext-notes-sidebar__header {
  display: flex;
  align-items: center;
-  gap: 8px;
-  padding: 12px 14px;
+  gap: var(--sp-2);
+  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
 }
@@ -36,12 +36,12 @@
 }
 .ext-notes-sidebar__actions {
  display: flex;
-  gap: 4px;
+  gap: var(--sp-1);
 }

 /* ── Folder Tree ────────────────────────── */
 .ext-notes-folder-tree {
-  padding: 4px 0;
+  padding: var(--sp-1) 0;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  max-height: 40%;
@@ -50,13 +50,13 @@
 .ext-notes-folder-tree__item {
  display: flex;
  align-items: center;
-  gap: 4px;
-  padding: 5px 12px;
+  gap: var(--sp-1);
+  padding: 5px var(--sp-3);
  font-size: 13px;
  color: var(--text-2);
  cursor: pointer;
  border-radius: var(--radius);
-  margin: 1px 6px;
+  margin: 1px var(--sp-2);
  transition: var(--transition);
  user-select: none;
 }
@@ -89,7 +89,7 @@
 .ext-notes-folder-tree__edit {
  flex: 1;
  font-size: 13px;
-  padding: 1px 4px;
+  padding: 1px var(--sp-1);
  border: 1px solid var(--accent);
  border-radius: 3px;
  background: var(--bg-surface);
@@ -98,7 +98,7 @@
  outline: none;
 }
 .ext-notes-folder-tree__add {
-  padding: 6px 12px;
+  padding: var(--sp-2) var(--sp-3);
  font-size: 12px;
  color: var(--text-3);
  cursor: pointer;
@@ -110,12 +110,12 @@

 /* ── Search ──────────────────────────────── */
 .ext-notes-search {
-  padding: 8px 14px;
+  padding: var(--sp-2) var(--sp-4);
  flex-shrink: 0;
 }
 .ext-notes-search input {
  width: 100%;
-  padding: 6px 10px;
+  padding: var(--sp-2) var(--sp-3);
  font-size: 13px;
  background: var(--bg-surface);
  color: var(--text);
@@ -135,16 +135,16 @@
 .ext-notes-list {
  flex: 1;
  overflow-y: auto;
-  padding: 4px 8px;
+  padding: var(--sp-1) var(--sp-2);
 }
 .ext-notes-list__empty {
-  padding: 40px 16px;
+  padding: var(--sp-10) var(--sp-4);
  text-align: center;
  color: var(--text-3);
  font-size: 13px;
 }
 .ext-notes-list__loading {
-  padding: 40px 0;
+  padding: var(--sp-10) 0;
  display: flex;
  justify-content: center;
  color: var(--text-3);
@@ -152,7 +152,7 @@

 /* ── Note Card (sidebar item) ────────────── */
 .ext-notes-note-card {
-  padding: 10px 12px;
+  padding: var(--sp-3) var(--sp-3);
  border-radius: var(--radius);
  cursor: pointer;
  transition: var(--transition);
@@ -170,7 +170,7 @@
  color: var(--text);
  display: flex;
  align-items: center;
-  gap: 6px;
+  gap: var(--sp-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
@@ -215,8 +215,8 @@
 .ext-notes-editor__header {
  display: flex;
  align-items: center;
-  gap: 8px;
-  padding: 10px 20px;
+  gap: var(--sp-2);
+  padding: var(--sp-3) var(--sp-5);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
 }
@@ -228,7 +228,7 @@
  background: transparent;
  border: none;
  outline: none;
-  padding: 4px 0;
+  padding: var(--sp-1) 0;
  font-family: var(--font);
 }
 .ext-notes-editor__title-input::placeholder {
@@ -236,14 +236,14 @@
 }
 .ext-notes-editor__actions {
  display: flex;
-  gap: 6px;
+  gap: var(--sp-2);
  align-items: center;
 }

 /* ── Folder select in editor ────────────── */
 .ext-notes-editor__folder-select {
  font-size: 12px;
-  padding: 3px 6px;
+  padding: 3px var(--sp-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-raised);
@@ -282,7 +282,7 @@
 .ext-notes-editor__textarea {
  flex: 1;
  resize: none;
-  padding: 20px;
+  padding: var(--sp-5);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
@@ -307,28 +307,28 @@
 }
 .ext-notes-editor__cm .cm-scroller {
  overflow: auto;
-  padding: 12px 20px;
+  padding: var(--sp-3) var(--sp-5);
 }

 /* ── Preview ─────────────────────────────── */
 .ext-notes-preview {
  flex: 1;
  overflow-y: auto;
-  padding: 20px;
+  padding: var(--sp-5);
  border-left: 1px solid var(--border);
  background: var(--bg-surface);
 }
-.ext-notes-preview h1 { font-size: 24px; font-weight: 700; color: var(--text); margin: 0 0 12px; }
-.ext-notes-preview h2 { font-size: 20px; font-weight: 600; color: var(--text); margin: 20px 0 8px; }
-.ext-notes-preview h3 { font-size: 16px; font-weight: 600; color: var(--text); margin: 16px 0 6px; }
-.ext-notes-preview p  { font-size: 14px; color: var(--text); line-height: 1.7; margin: 0 0 10px; }
-.ext-notes-preview ul, .ext-notes-preview ol { padding-left: 24px; margin: 0 0 10px; color: var(--text); font-size: 14px; line-height: 1.7; }
+.ext-notes-preview h1 { font-size: 24px; font-weight: 700; color: var(--text); margin: 0 0 var(--sp-3); }
+.ext-notes-preview h2 { font-size: 20px; font-weight: 600; color: var(--text); margin: var(--sp-5) 0 var(--sp-2); }
+.ext-notes-preview h3 { font-size: 16px; font-weight: 600; color: var(--text); margin: var(--sp-4) 0 var(--sp-2); }
+.ext-notes-preview p  { font-size: 14px; color: var(--text); line-height: 1.7; margin: 0 0 var(--sp-3); }
+.ext-notes-preview ul, .ext-notes-preview ol { padding-left: var(--sp-6); margin: 0 0 var(--sp-3); color: var(--text); font-size: 14px; line-height: 1.7; }
 .ext-notes-preview li { margin-bottom: 2px; }
 .ext-notes-preview code {
  font-family: var(--mono);
  font-size: 13px;
  background: var(--bg-raised);
-  padding: 2px 6px;
+  padding: 2px var(--sp-2);
  border-radius: 3px;
  color: var(--accent);
 }
@@ -336,9 +336,9 @@
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
-  padding: 14px;
+  padding: var(--sp-4);
  overflow-x: auto;
-  margin: 0 0 12px;
+  margin: 0 0 var(--sp-3);
 }
 .ext-notes-preview pre code {
  background: none;
@@ -348,8 +348,8 @@
 }
 .ext-notes-preview blockquote {
  border-left: 3px solid var(--accent);
-  margin: 0 0 12px;
-  padding: 4px 16px;
+  margin: 0 0 var(--sp-3);
+  padding: var(--sp-1) var(--sp-4);
  color: var(--text-2);
 }
 .ext-notes-preview a { color: var(--accent); text-decoration: none; }
@@ -357,14 +357,14 @@
 .ext-notes-preview hr {
  border: none;
  border-top: 1px solid var(--border);
-  margin: 16px 0;
+  margin: var(--sp-4) 0;
 }
 .ext-notes-preview strong { font-weight: 600; }
 .ext-notes-preview em { font-style: italic; }

 /* ── Toggle button ───────────────────────── */
 .ext-notes-toggle {
-  padding: 4px 10px;
+  padding: var(--sp-1) var(--sp-3);
  font-size: 12px;
  border: 1px solid var(--border);
  background: var(--bg-raised);
@@ -384,7 +384,7 @@
  cursor: pointer;
  border-radius: var(--radius);
  transition: var(--transition);
-  padding: 4px 10px;
+  padding: var(--sp-1) var(--sp-3);
  font-size: 13px;
 }
 .ext-notes-btn:hover { background: var(--bg-hover); color: var(--text); }
@@ -396,7 +396,7 @@
 .ext-notes-saved {
  font-size: 12px;
  color: var(--text-3);
-  padding: 2px 8px;
+  padding: 2px var(--sp-2);
 }
 .ext-notes-saved--dirty {
  color: var(--warning);
@@ -405,7 +405,7 @@
 /* ── Tag Pills (shared) ─────────────────── */
 .ext-notes-tag-pill {
  display: inline-block;
-  padding: 1px 8px;
+  padding: 1px var(--sp-2);
  font-size: 11px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
@@ -420,7 +420,7 @@
 .ext-notes-tag-pill:hover { background: var(--bg-hover); color: var(--text); }
 .ext-notes-tag-pill--active { background: var(--accent); color: #fff; border-color: var(--accent); }
 .ext-notes-tag-pill__remove {
-  margin-left: 4px;
+  margin-left: var(--sp-1);
  font-size: 10px;
  opacity: 0.6;
  cursor: pointer;
@@ -429,7 +429,7 @@

 /* ── Tag Filter (sidebar) ──────────────── */
 .ext-notes-tag-filter {
-  padding: 6px 14px 4px;
+  padding: var(--sp-2) var(--sp-4) var(--sp-1);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
 }
@@ -458,15 +458,15 @@
  max-height: 60px;
  overflow-y: auto;
 }
-.ext-notes-tag-filter__pills .ext-notes-tag-pill { font-size: 10px; padding: 0 6px; }
+.ext-notes-tag-filter__pills .ext-notes-tag-pill { font-size: 10px; padding: 0 var(--sp-2); }

 /* ── Tag Input (editor) ────────────────── */
 .ext-notes-tag-input {
  display: flex;
  flex-wrap: wrap;
-  gap: 4px;
+  gap: var(--sp-1);
  align-items: center;
-  padding: 4px 20px 6px;
+  padding: var(--sp-1) var(--sp-5) var(--sp-2);
  border-bottom: 1px solid var(--border);
  position: relative;
 }
@@ -488,7 +488,7 @@
 .ext-notes-tag-autocomplete {
  position: absolute;
  top: 100%;
-  left: 20px;
+  left: var(--sp-5);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
@@ -499,7 +499,7 @@
  min-width: 140px;
 }
 .ext-notes-tag-autocomplete__item {
-  padding: 4px 10px;
+  padding: var(--sp-1) var(--sp-3);
  font-size: 12px;
  cursor: pointer;
  color: var(--text);
@@ -513,7 +513,7 @@
  margin-top: 3px;
  overflow: hidden;
 }
-.ext-notes-note-card__tags .ext-notes-tag-pill { font-size: 10px; padding: 0 6px; cursor: default; }
+.ext-notes-note-card__tags .ext-notes-tag-pill { font-size: 10px; padding: 0 var(--sp-2); cursor: default; }
 .ext-notes-note-card__tags .ext-notes-tag-pill--overflow {
  background: transparent;
  border: none;
@@ -531,10 +531,10 @@
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  min-width: 150px;
-  padding: 4px 0;
+  padding: var(--sp-1) 0;
 }
 .ext-notes-folder-context-menu__item {
-  padding: 6px 14px;
+  padding: var(--sp-2) var(--sp-4);
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
@@ -580,7 +580,7 @@
 /* ── Backlinks Panel ────────────────────── */
 .ext-notes-backlinks-panel {
  border-top: 1px solid var(--border);
-  padding: 10px 16px;
+  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-raised);
  flex-shrink: 0;
  max-height: 200px;
@@ -592,10 +592,10 @@
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
-  margin-bottom: 6px;
+  margin-bottom: var(--sp-2);
  display: flex;
  align-items: center;
-  gap: 6px;
+  gap: var(--sp-2);
  cursor: pointer;
  user-select: none;
 }
@@ -607,15 +607,15 @@
  background: var(--bg-hover);
  color: var(--text-2);
  font-size: 10px;
-  padding: 0 6px;
+  padding: 0 var(--sp-2);
  border-radius: 8px;
  line-height: 16px;
 }
 .ext-notes-backlinks-panel__item {
  display: flex;
  align-items: center;
-  gap: 8px;
-  padding: 4px 8px;
+  gap: var(--sp-2);
+  padding: var(--sp-1) var(--sp-2);
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
@@ -640,7 +640,7 @@
 }
 .ext-notes-sidebar-tabs__tab {
  flex: 1;
-  padding: 10px 14px;
+  padding: var(--sp-3) var(--sp-4);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
@@ -674,16 +674,16 @@
 .ext-notes-sidebar-outline {
  flex: 1;
  overflow-y: auto;
-  padding: 8px 0;
+  padding: var(--sp-2) 0;
 }
 .ext-notes-sidebar-outline__empty {
-  padding: 40px 16px;
+  padding: var(--sp-10) var(--sp-4);
  text-align: center;
  color: var(--text-3);
  font-size: 13px;
 }
 .ext-notes-sidebar-outline__item {
-  padding: 5px 12px;
+  padding: 5px var(--sp-3);
  font-size: 13px;
  color: var(--text-2);
  cursor: pointer;
@@ -692,7 +692,7 @@
  text-overflow: ellipsis;
  transition: var(--transition);
  border-radius: var(--radius);
-  margin: 1px 6px;
+  margin: 1px var(--sp-2);
 }
 .ext-notes-sidebar-outline__item:hover {
  background: var(--bg-hover);
@@ -723,10 +723,10 @@
 .ext-notes-graph-pane canvas:active { cursor: grabbing; }
 .ext-notes-graph-toolbar {
  position: absolute;
-  top: 12px;
-  right: 12px;
+  top: var(--sp-3);
+  right: var(--sp-3);
  display: flex;
-  gap: 8px;
+  gap: var(--sp-2);
  align-items: center;
  z-index: 5;
  font-size: 12px;
@@ -735,7 +735,7 @@
 .ext-notes-graph-toolbar label {
  display: flex;
  align-items: center;
-  gap: 4px;
+  gap: var(--sp-1);
  cursor: pointer;
  user-select: none;
 }
@@ -746,7 +746,7 @@
  background: var(--bg-raised, #fff);
  border: 1px solid var(--border, #ddd);
  border-radius: var(--radius, 6px);
-  padding: 8px 12px;
+  padding: var(--sp-2) var(--sp-3);
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  z-index: 10;
  max-width: 220px;
@@ -759,13 +759,13 @@
 }
 .ext-notes-graph-tooltip__tags {
  display: flex;
-  gap: 4px;
+  gap: var(--sp-1);
  flex-wrap: wrap;
-  margin-top: 4px;
+  margin-top: var(--sp-1);
 }
 .ext-notes-graph-tooltip__tags .ext-notes-tag-pill {
  font-size: 10px;
-  padding: 1px 6px;
+  padding: 1px var(--sp-2);
  border-radius: 8px;
  background: var(--bg-hover, #eee);
  color: var(--text-2, #666);
@@ -773,7 +773,7 @@
 .ext-notes-graph-tooltip__edges {
  font-size: 11px;
  color: var(--text-3, #999);
-  margin-top: 4px;
+  margin-top: var(--sp-1);
 }
 .ext-notes-graph-empty {
  display: flex;
@@ -785,7 +785,7 @@
 }

 /* ── Responsive ──────────────────────────── */
-@media (max-width: 700px) {
+@media (max-width: 768px) {
  .ext-notes-sidebar { width: 100%; border-right: none; border-bottom: 1px solid var(--border); max-height: 40vh; }
  .ext-notes-app { flex-direction: column; }
  .ext-notes-folder-tree { max-height: 30vh; }
--- a/packages/schedules/css/main.css
+++ b/packages/schedules/css/main.css
@@ -12,7 +12,7 @@
  display: flex;
  align-items: center;
  justify-content: space-between;
-  padding: 12px 16px;
+  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
 }

@@ -25,10 +25,10 @@
 .ext-schedules-body {
  flex: 1;
  overflow: auto;
-  padding: 16px;
+  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
-  gap: 16px;
+  gap: var(--sp-4);
 }

 .ext-schedules-count {
@@ -40,7 +40,7 @@

 .ext-schedules-list__loading,
 .ext-schedules-list__empty {
-  padding: 40px 16px;
+  padding: var(--sp-10) var(--sp-4);
  text-align: center;
  color: var(--text-3);
  font-size: 0.85rem;
@@ -54,7 +54,7 @@

 .ext-schedules-table th {
  text-align: left;
-  padding: 8px 12px;
+  padding: var(--sp-2) var(--sp-3);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
@@ -64,7 +64,7 @@
 }

 .ext-schedules-table td {
-  padding: 10px 12px;
+  padding: var(--sp-3) var(--sp-3);
  border-bottom: 1px solid var(--border);
  vertical-align: top;
 }
@@ -99,7 +99,7 @@
  font-family: monospace;
  font-size: 0.8rem;
  background: var(--bg-raised);
-  padding: 2px 6px;
+  padding: 2px var(--sp-2);
  border-radius: 4px;
  color: var(--text-2);
 }
@@ -118,7 +118,7 @@

 .ext-schedules-row__actions {
  display: flex;
-  gap: 4px;
+  gap: var(--sp-1);
  white-space: nowrap;
 }

@@ -127,7 +127,7 @@
 .ext-schedules-toggle-btn {
  font-size: 0.75rem;
  font-weight: 600;
-  padding: 2px 10px;
+  padding: 2px var(--sp-3);
  border-radius: 10px;
  border: 1px solid var(--border);
  cursor: pointer;
@@ -160,7 +160,7 @@
 .ext-schedules-btn:hover { background: var(--bg-hover); }

 .ext-schedules-btn--sm {
-  padding: 3px 8px;
+  padding: 3px var(--sp-2);
  font-size: 0.8rem;
 }

@@ -172,9 +172,9 @@

 /* ── Form ─────────────────────────────────── */

-.ext-schedules-form { display: flex; flex-direction: column; gap: 12px; }
-.ext-schedules-form__row { display: flex; align-items: center; gap: 12px; }
-.ext-schedules-form__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
+.ext-schedules-form { display: flex; flex-direction: column; gap: var(--sp-3); }
+.ext-schedules-form__row { display: flex; align-items: center; gap: var(--sp-3); }
+.ext-schedules-form__actions { display: flex; justify-content: flex-end; gap: var(--sp-2); margin-top: var(--sp-2); }

 .ext-schedules-cron-input {
  font-family: monospace;
@@ -183,7 +183,7 @@
 .ext-schedules-cron-preview {
  font-size: 0.8rem;
  color: var(--accent);
-  margin-top: 4px;
+  margin-top: var(--sp-1);
  font-style: italic;
 }

@@ -196,7 +196,7 @@
 .ext-schedules-toggle {
  display: flex;
  align-items: center;
-  gap: 8px;
+  gap: var(--sp-2);
  font-size: 0.85rem;
  cursor: pointer;
 }
@@ -214,7 +214,7 @@
  display: flex;
  align-items: center;
  justify-content: space-between;
-  padding: 8px 12px;
+  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
  font-weight: 600;
@@ -222,7 +222,7 @@

 .ext-schedules-logs__loading,
 .ext-schedules-logs__empty {
-  padding: 20px 12px;
+  padding: var(--sp-5) var(--sp-3);
  text-align: center;
  color: var(--text-3);
  font-size: 0.8rem;
@@ -231,8 +231,8 @@
 .ext-schedules-log-entry {
  display: flex;
  align-items: center;
-  gap: 10px;
-  padding: 6px 12px;
+  gap: var(--sp-3);
+  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--border);
  font-size: 0.8rem;
 }
@@ -273,5 +273,5 @@
  .ext-schedules-table td:nth-child(3) {
    display: none;
  }
-  .ext-schedules-body { padding: 8px; }
+  .ext-schedules-body { padding: var(--sp-2); }
 }
--- a/packages/sdk-test-runner/css/main.css
+++ b/packages/sdk-test-runner/css/main.css
@@ -3,8 +3,8 @@
 .ext-sdk-test-runner-header {
  display: flex;
  align-items: baseline;
-  gap: 12px;
-  margin-bottom: 4px;
+  gap: var(--sp-3);
+  margin-bottom: var(--sp-1);
 }
 .ext-sdk-test-runner-header h1 {
  font-size: 20px;
@@ -20,14 +20,14 @@
 .ext-sdk-test-runner-desc {
  font-size: 13px;
  color: var(--text-2, #aaa);
-  margin: 0 0 16px 0;
+  margin: 0 0 var(--sp-4) 0;
  line-height: 1.5;
 }

 /* Fixtures panel */
 .ext-sdk-test-runner-fixtures {
-  margin-bottom: 16px;
-  padding: 10px 14px;
+  margin-bottom: var(--sp-4);
+  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border, #333);
  border-radius: 6px;
  background: var(--bg-raised, #1a1a1a);
@@ -35,7 +35,7 @@
 .ext-sdk-test-runner-fixture-row {
  display: flex;
  align-items: center;
-  gap: 10px;
+  gap: var(--sp-3);
  flex-wrap: wrap;
 }
 .ext-sdk-test-runner-fixture-label {
@@ -46,7 +46,7 @@
  white-space: nowrap;
 }
 .ext-sdk-test-runner-select {
-  padding: 4px 8px;
+  padding: var(--sp-1) var(--sp-2);
  font-size: 13px;
  background: var(--bg-raised, #222);
  color: var(--text, #e0e0e0);
@@ -55,7 +55,7 @@
  min-width: 130px;
 }
 .ext-sdk-test-runner-input {
-  padding: 4px 8px;
+  padding: var(--sp-1) var(--sp-2);
  font-size: 13px;
  background: var(--bg-raised, #222);
  color: var(--text, #e0e0e0);
@@ -78,7 +78,7 @@
 .ext-sdk-test-runner-fixture-note {
  font-size: 11px;
  color: var(--text-3, #666);
-  margin-top: 6px;
+  margin-top: var(--sp-2);
  line-height: 1.4;
 }

@@ -86,14 +86,14 @@
 .ext-sdk-test-runner-controls {
  display: flex;
  flex-direction: column;
-  gap: 10px;
-  margin-bottom: 16px;
+  gap: var(--sp-3);
+  margin-bottom: var(--sp-4);
 }
 .ext-sdk-test-runner-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
-  gap: 8px;
+  gap: var(--sp-2);
 }
 .ext-sdk-test-runner-filter-label {
  font-size: 12px;
@@ -113,10 +113,10 @@
 .ext-sdk-test-runner-check input { cursor: pointer; }
 .ext-sdk-test-runner-btn-row {
  display: flex;
-  gap: 8px;
+  gap: var(--sp-2);
 }
 .ext-sdk-test-runner-btn {
-  padding: 6px 14px;
+  padding: var(--sp-2) var(--sp-4);
  border-radius: 6px;
  border: 1px solid var(--border, #444);
  background: var(--bg-raised, #2a2a2a);
@@ -143,16 +143,16 @@
 .ext-sdk-test-runner-summary {
  display: flex;
  flex-wrap: wrap;
-  gap: 8px;
-  margin-bottom: 12px;
-  padding: 10px 12px;
+  gap: var(--sp-2);
+  margin-bottom: var(--sp-3);
+  padding: var(--sp-3) var(--sp-3);
  background: var(--bg-raised, #1e1e1e);
  border-radius: 8px;
  border: 1px solid var(--border, #333);
 }
 .ext-sdk-test-runner-badge {
  display: inline-block;
-  padding: 3px 10px;
+  padding: var(--sp-1) var(--sp-3);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
@@ -172,7 +172,7 @@
 }
 .ext-sdk-test-runner-table th {
  text-align: left;
-  padding: 8px 10px;
+  padding: var(--sp-2) var(--sp-3);
  background: var(--bg-raised, #1e1e1e);
  color: var(--text-2, #aaa);
  font-weight: 600;
@@ -185,7 +185,7 @@
  z-index: 1;
 }
 .ext-sdk-test-runner-table td {
-  padding: 6px 10px;
+  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--border-subtle, #2a2a2a);
  color: var(--text, #e0e0e0);
  vertical-align: top;
--- a/packages/tasks/css/main.css
+++ b/packages/tasks/css/main.css
@@ -3,7 +3,7 @@
 .ext-tasks-app {
  max-width: 1100px;
  margin: 0 auto;
-  padding: 24px 20px;
+  padding: var(--sp-6) var(--sp-5);
  height: 100%;
  display: flex;
  flex-direction: column;
@@ -14,8 +14,8 @@
 .ext-tasks-header {
  display: flex;
  align-items: center;
-  gap: 12px;
-  margin-bottom: 20px;
+  gap: var(--sp-3);
+  margin-bottom: var(--sp-5);
  flex-shrink: 0;
 }
 .ext-tasks-title {
@@ -31,7 +31,7 @@
  margin-left: auto;
  display: flex;
  align-items: center;
-  gap: 10px;
+  gap: var(--sp-3);
 }
 .ext-tasks-view-tabs {
  display: flex;
@@ -41,7 +41,7 @@
  padding: 2px;
 }
 .ext-tasks-view-tab {
-  padding: 5px 14px;
+  padding: 5px var(--sp-4);
  font-size: 13px;
  border: none;
  background: transparent;
@@ -59,17 +59,17 @@
  overflow-y: auto;
  display: flex;
  flex-direction: column;
-  gap: 6px;
+  gap: var(--sp-2);
 }
 .ext-tasks-list__filters {
  display: flex;
  align-items: center;
-  gap: 10px;
-  margin-bottom: 8px;
+  gap: var(--sp-3);
+  margin-bottom: var(--sp-2);
  flex-shrink: 0;
 }
 .ext-tasks-filter {
-  padding: 5px 10px;
+  padding: 5px var(--sp-3);
  font-size: 13px;
  background: var(--bg-raised);
  color: var(--text);
@@ -83,7 +83,7 @@
 .ext-tasks-list__loading, .ext-tasks-list__empty {
  display: flex;
  justify-content: center;
-  padding: 40px 0;
+  padding: var(--sp-10) 0;
  color: var(--text-3);
  font-size: 14px;
 }
@@ -93,7 +93,7 @@
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
-  padding: 12px 14px;
+  padding: var(--sp-3) var(--sp-4);
  transition: var(--transition);
 }
 .ext-tasks-card:hover {
@@ -103,7 +103,7 @@
 .ext-tasks-card__header {
  display: flex;
  align-items: center;
-  gap: 8px;
+  gap: var(--sp-2);
 }
 .ext-tasks-card__priority { font-size: 10px; }
 .ext-tasks-card__title {
@@ -116,7 +116,7 @@
 .ext-tasks-card__title:hover { color: var(--accent); }
 .ext-tasks-card__status {
  font-size: 11px;
-  padding: 2px 8px;
+  padding: 2px var(--sp-2);
  border-radius: 10px;
  font-weight: 500;
 }
@@ -128,7 +128,7 @@
 .ext-tasks-card__desc {
  font-size: 13px;
  color: var(--text-2);
-  margin-top: 6px;
+  margin-top: var(--sp-2);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
@@ -137,15 +137,15 @@
 .ext-tasks-card__footer {
  display: flex;
  align-items: center;
-  gap: 10px;
-  margin-top: 8px;
+  gap: var(--sp-3);
+  margin-top: var(--sp-2);
  font-size: 12px;
  color: var(--text-3);
 }
 .ext-tasks-card__actions {
  margin-left: auto;
  display: flex;
-  gap: 4px;
+  gap: var(--sp-1);
  opacity: 0;
  transition: var(--transition);
 }
@@ -160,7 +160,7 @@
  border-radius: var(--radius);
  transition: var(--transition);
 }
-.ext-tasks-btn--sm { padding: 2px 8px; font-size: 13px; }
+.ext-tasks-btn--sm { padding: 2px var(--sp-2); font-size: 13px; }
 .ext-tasks-btn:hover { background: var(--bg-hover); color: var(--text); }
 .ext-tasks-btn--danger:hover { background: var(--danger-dim); color: var(--danger); }

@@ -169,7 +169,7 @@
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
-  gap: 12px;
+  gap: var(--sp-3);
  overflow-x: auto;
  overflow-y: hidden;
 }
@@ -184,7 +184,7 @@
  display: flex;
  align-items: center;
  justify-content: space-between;
-  padding: 10px 12px;
+  padding: var(--sp-3) var(--sp-3);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
@@ -201,16 +201,16 @@
 .ext-tasks-board__col-body {
  flex: 1;
  overflow-y: auto;
-  padding: 8px;
+  padding: var(--sp-2);
  display: flex;
  flex-direction: column;
-  gap: 6px;
+  gap: var(--sp-2);
 }
 .ext-tasks-board__card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
-  padding: 10px 12px;
+  padding: var(--sp-3) var(--sp-3);
  cursor: pointer;
  transition: var(--transition);
 }
@@ -223,23 +223,23 @@
  color: var(--text);
  display: flex;
  align-items: center;
-  gap: 6px;
+  gap: var(--sp-2);
 }
 .ext-tasks-board__card-due {
  font-size: 11px;
  color: var(--text-3);
-  margin-top: 4px;
+  margin-top: var(--sp-1);
 }

 /* ── Form ────────────────────────────────── */
-.ext-tasks-form { display: flex; flex-direction: column; gap: 12px; }
-.ext-tasks-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
-.ext-tasks-form__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
+.ext-tasks-form { display: flex; flex-direction: column; gap: var(--sp-3); }
+.ext-tasks-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
+.ext-tasks-form__actions { display: flex; justify-content: flex-end; gap: var(--sp-2); margin-top: var(--sp-1); }
 .ext-tasks-form textarea,
 .ext-tasks-form input,
 .ext-tasks-form select {
  width: 100%;
-  padding: 7px 10px;
+  padding: 7px var(--sp-3);
  font-size: 13px;
  background: var(--input-bg);
  color: var(--text);
@@ -258,23 +258,23 @@
 .ext-tasks-status-widget {
  font-size: 12px;
  color: var(--text-3);
-  padding: 4px 10px;
+  padding: var(--sp-1) var(--sp-3);
 }

 /* ── Slot containers ─────────────────────── */
 .sw-slot {
  display: flex;
  align-items: center;
-  gap: 8px;
+  gap: var(--sp-2);
 }
 .sw-slot--statusbar {
-  padding: 4px 12px;
+  padding: var(--sp-1) var(--sp-3);
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-3);
  flex-shrink: 0;
 }
 .sw-slot--toolbar {
-  padding: 4px 12px;
+  padding: var(--sp-1) var(--sp-3);
  flex-shrink: 0;
 }
--- a/packages/team-activity-log/css/main.css
+++ b/packages/team-activity-log/css/main.css
@@ -5,10 +5,10 @@
 .ext-team-activity-log-shell {
  max-width: 720px;
  margin: 0 auto;
-  padding: 24px 16px;
+  padding: var(--sp-6) var(--sp-4);
  display: flex;
  flex-direction: column;
-  gap: 16px;
+  gap: var(--sp-4);
  min-height: 100%;
 }

@@ -18,13 +18,13 @@
  display: flex;
  align-items: center;
  justify-content: space-between;
-  gap: 12px;
+  gap: var(--sp-3);
 }

 .ext-team-activity-log-header__left {
  display: flex;
  align-items: baseline;
-  gap: 10px;
+  gap: var(--sp-3);
 }

 .ext-team-activity-log-title {
@@ -43,11 +43,11 @@

 .ext-team-activity-log-form {
  display: flex;
-  gap: 8px;
+  gap: var(--sp-2);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
-  padding: 10px 12px;
+  padding: var(--sp-3) var(--sp-3);
 }

 .ext-team-activity-log-form__select {
@@ -57,7 +57,7 @@
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
-  padding: 6px 8px;
+  padding: var(--sp-2) var(--sp-2);
  cursor: pointer;
 }

@@ -69,7 +69,7 @@
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
-  padding: 6px 10px;
+  padding: var(--sp-2) var(--sp-3);
  outline: none;
  transition: border-color var(--transition);
 }
@@ -90,7 +90,7 @@
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
-  padding: 6px 16px;
+  padding: var(--sp-2) var(--sp-4);
  cursor: pointer;
  transition: background var(--transition);
 }
@@ -109,7 +109,7 @@
 .ext-team-activity-log-filters {
  display: flex;
  align-items: center;
-  gap: 6px;
+  gap: var(--sp-2);
  flex-wrap: wrap;
 }

@@ -120,7 +120,7 @@
  color: var(--text-2);
  font-family: var(--font);
  font-size: 12px;
-  padding: 4px 10px;
+  padding: var(--sp-1) var(--sp-3);
  cursor: pointer;
  transition: all var(--transition);
 }
@@ -147,14 +147,14 @@
 .ext-team-activity-log-entries {
  display: flex;
  flex-direction: column;
-  gap: 6px;
+  gap: var(--sp-2);
 }

 .ext-team-activity-log-entry {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
-  padding: 10px 12px;
+  padding: var(--sp-3) var(--sp-3);
  transition: border-color var(--transition);
 }

@@ -165,8 +165,8 @@
 .ext-team-activity-log-entry__header {
  display: flex;
  align-items: center;
-  gap: 8px;
-  margin-bottom: 4px;
+  gap: var(--sp-2);
+  margin-bottom: var(--sp-1);
 }

 .ext-team-activity-log-entry__category {
@@ -193,7 +193,7 @@
  color: var(--text-3);
  font-size: 16px;
  cursor: pointer;
-  padding: 0 4px;
+  padding: 0 var(--sp-1);
  line-height: 1;
  opacity: 0;
  transition: all var(--transition);
@@ -218,7 +218,7 @@
 .ext-team-activity-log-empty,
 .ext-team-activity-log-loading {
  text-align: center;
-  padding: 40px 16px;
+  padding: var(--sp-10) var(--sp-4);
  color: var(--text-3);
  font-size: 14px;
 }
--- a/packages/workflow-demo/css/main.css
+++ b/packages/workflow-demo/css/main.css
@@ -7,7 +7,7 @@
 .ext-workflow-demo {
    max-width: 1100px;
    margin: 0 auto;
-    padding: 0 1.5rem 2rem;
+    padding: 0 var(--sp-6) var(--sp-8);
 }

 /* Topbar */
@@ -15,9 +15,9 @@
    display: flex;
    align-items: center;
    justify-content: space-between;
-    padding: 1rem 0;
+    padding: var(--sp-4) 0;
    border-bottom: 1px solid var(--border);
-    margin-bottom: 1rem;
+    margin-bottom: var(--sp-4);
 }
 .ext-workflow-demo-topbar h1 {
    font-size: 1.5rem;
@@ -29,7 +29,7 @@
 /* Subtitle */
 .ext-workflow-demo-subtitle {
    color: var(--text-2);
-    margin: 0 0 1.5rem;
+    margin: 0 0 var(--sp-6);
    font-size: 0.9rem;
 }

@@ -37,7 +37,7 @@
 .ext-workflow-demo-grid {
    display: grid;
    grid-template-columns: 1fr;
-    gap: 1.5rem;
+    gap: var(--sp-6);
 }
@media (min-width: 768px) {
    .ext-workflow-demo-grid {
@@ -50,10 +50,10 @@
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
-    padding: 1.25rem;
+    padding: var(--sp-5);
    display: flex;
    flex-direction: column;
-    gap: 0.75rem;
+    gap: var(--sp-3);
    color: var(--text);
 }

@@ -61,7 +61,7 @@
 .ext-workflow-demo-card-title-row {
    display: flex;
    align-items: center;
-    gap: 0.5rem;
+    gap: var(--sp-2);
 }
 .ext-workflow-demo-card-title-row h2 {
    font-size: 1.1rem;
@@ -114,9 +114,9 @@
 .ext-workflow-demo-stage-flow {
    display: flex;
    align-items: flex-start;
-    gap: 0.25rem;
+    gap: var(--sp-1);
    flex-wrap: wrap;
-    padding: 0.75rem;
+    padding: var(--sp-3);
    background: var(--bg-raised);
    border-radius: 6px;
    overflow-x: auto;
@@ -172,7 +172,7 @@
    font-size: 0.8rem;
 }
 .ext-workflow-demo-card-collapsible summary {
-    padding: 0.5rem 0.75rem;
+    padding: var(--sp-2) var(--sp-3);
    cursor: pointer;
    font-weight: 600;
    user-select: none;
@@ -182,17 +182,17 @@
    background: var(--bg-hover);
 }
 .ext-workflow-demo-collapsible-content {
-    padding: 0 0.75rem 0.75rem;
+    padding: 0 var(--sp-3) var(--sp-3);
 }
 .ext-workflow-demo-collapsible-content pre {
    background: var(--bg-raised);
    color: var(--text);
-    padding: 0.5rem;
+    padding: var(--sp-2);
    border-radius: 4px;
    overflow-x: auto;
    font-size: 0.72rem;
    line-height: 1.4;
-    margin: 0.25rem 0;
+    margin: var(--sp-1) 0;
    font-family: var(--mono);
 }

@@ -200,9 +200,9 @@
 .ext-workflow-demo-card-actions {
    display: flex;
    align-items: center;
-    gap: 0.5rem;
+    gap: var(--sp-2);
    margin-top: auto;
-    padding-top: 0.5rem;
+    padding-top: var(--sp-2);
    border-top: 1px solid var(--border);
 }
 .ext-workflow-demo-card .ext-workflow-demo-btn {
@@ -219,13 +219,13 @@
 .ext-workflow-demo-public-link-row {
    display: flex;
    align-items: center;
-    gap: 0.5rem;
-    margin-top: 0.25rem;
+    gap: var(--sp-2);
+    margin-top: var(--sp-1);
 }
 .ext-workflow-demo-public-link-row input {
    flex: 1;
    font-size: 0.7rem;
-    padding: 4px 8px;
+    padding: var(--sp-1) var(--sp-2);
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: 4px;
@@ -233,7 +233,7 @@
    font-family: var(--mono);
 }
 .ext-workflow-demo-public-link-row .ext-workflow-demo-btn-copy {
-    padding: 4px 10px;
+    padding: var(--sp-1) var(--sp-3);
    font-size: 0.7rem;
    background: var(--bg-raised);
    border: 1px solid var(--border);
--- a/src/css/layout.css
+++ b/src/css/layout.css
@@ -70,14 +70,14 @@

 .sidebar-top {
    display: flex; flex-direction: column; gap: 2px;
-    padding: 10px 10px 6px;
+    padding: var(--sp-3) var(--sp-3) var(--sp-2);
    border-bottom: 1px solid var(--border);
 }

 /* Brand / collapse toggle */
 .sb-brand {
-    display: flex; align-items: center; gap: 10px;
-    padding: 8px 10px; border-radius: var(--radius);
+    display: flex; align-items: center; gap: var(--sp-3);
+    padding: var(--sp-2) var(--sp-3); border-radius: var(--radius);
    background: none; border: none; color: var(--text);
    cursor: pointer; font-size: 13px; white-space: nowrap;
    transition: background var(--transition); width: 100%;
@@ -90,8 +90,8 @@
 .brand-text { font-weight: 600; font-size: 14px; }

 .sb-btn {
-    display: flex; align-items: center; gap: 10px;
-    padding: 8px 10px; border-radius: var(--radius);
+    display: flex; align-items: center; gap: var(--sp-3);
+    padding: var(--sp-2) var(--sp-3); border-radius: var(--radius);
    background: none; border: none; color: var(--text-2);
    cursor: pointer; font-size: 13px; white-space: nowrap;
    transition: background var(--transition), color var(--transition);
@@ -106,19 +106,19 @@
 .sidebar.collapsed .brand-text { opacity: 0; width: 0; }

 /* Collapsed centering */
-.sidebar.collapsed .sidebar-top { padding: 10px 0 8px; align-items: center; }
-.sidebar.collapsed .sidebar-bottom { padding: 8px 0; display: flex; flex-direction: column; align-items: center; }
-.sidebar.collapsed .sb-brand { justify-content: center; padding: 8px 0; gap: 0; }
-.sidebar.collapsed .sb-btn { justify-content: center; padding: 8px 0; gap: 0; }
-.sidebar.collapsed .split-btn-main { justify-content: center; padding: 8px 0; gap: 0; }
-.sidebar.collapsed .user-btn { justify-content: center; padding: 6px 0; gap: 0; }
+.sidebar.collapsed .sidebar-top { padding: var(--sp-3) 0 var(--sp-2); align-items: center; }
+.sidebar.collapsed .sidebar-bottom { padding: var(--sp-2) 0; display: flex; flex-direction: column; align-items: center; }
+.sidebar.collapsed .sb-brand { justify-content: center; padding: var(--sp-2) 0; gap: 0; }
+.sidebar.collapsed .sb-btn { justify-content: center; padding: var(--sp-2) 0; gap: 0; }
+.sidebar.collapsed .split-btn-main { justify-content: center; padding: var(--sp-2) 0; gap: 0; }
+.sidebar.collapsed .user-btn { justify-content: center; padding: var(--sp-2) 0; gap: 0; }
 .sidebar.collapsed .avatar-bug { display: none; }

 /* Split button (New Chat + dropdown) */
 .split-btn { display: flex; width: 100%; gap: 0; position: relative; }
 .split-btn-main {
-    flex: 1; display: flex; align-items: center; gap: 10px;
-    padding: 8px 10px; border-radius: var(--radius) 0 0 var(--radius);
+    flex: 1; display: flex; align-items: center; gap: var(--sp-3);
+    padding: var(--sp-2) var(--sp-3); border-radius: var(--radius) 0 0 var(--radius);
    background: none; border: none; color: var(--text-2);
    cursor: pointer; font-size: 13px; white-space: nowrap;
    transition: background var(--transition), color var(--transition);
@@ -127,7 +127,7 @@
 .split-btn-main svg { flex-shrink: 0; }

 .split-btn-drop {
-    display: flex; align-items: center; padding: 8px 6px;
+    display: flex; align-items: center; padding: var(--sp-2) 6px;
    border-radius: 0 var(--radius) var(--radius) 0;
    background: none; border: none; border-left: 1px solid var(--border);
    color: var(--text-3); cursor: pointer;
@@ -141,13 +141,13 @@
    display: none; position: absolute; left: 6px; right: 6px;
    top: 100%; z-index: 200;
    background: var(--bg-raised); border: 1px solid var(--border-light);
-    border-radius: var(--radius); padding: 4px;
+    border-radius: var(--radius); padding: var(--sp-1);
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
 }
 .split-dropdown.open { display: block; }
 .split-dropdown-item {
-    display: flex; align-items: center; gap: 8px;
-    padding: 7px 10px; border-radius: 4px; width: 100%;
+    display: flex; align-items: center; gap: var(--sp-2);
+    padding: 7px var(--sp-3); border-radius: 4px; width: 100%;
    background: none; border: none; color: var(--text-2);
    cursor: pointer; font-size: 12px; white-space: nowrap;
    transition: background var(--transition), color var(--transition);
@@ -160,8 +160,8 @@


 .user-btn {
-    display: flex; align-items: center; gap: 10px;
-    padding: 6px 8px; border-radius: var(--radius);
+    display: flex; align-items: center; gap: var(--sp-3);
+    padding: var(--sp-2) var(--sp-2); border-radius: var(--radius);
    background: none; border: none; color: var(--text);
    cursor: pointer; width: 100%;
    transition: background var(--transition);
@@ -198,12 +198,12 @@
 /* ── Sidebar Tabs (v0.21.6) ──────────── */

 .sidebar-tabs {
-    display: flex; padding: 0 8px; gap: 0;
+    display: flex; padding: 0 var(--sp-2); gap: 0;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
 }
 .sidebar-tab {
-    flex: 1; padding: 6px 0; font-size: 12px; font-weight: 500;
+    flex: 1; padding: var(--sp-2) 0; font-size: 12px; font-weight: 500;
    background: none; border: none; border-bottom: 2px solid transparent;
    color: var(--text-3); cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
@@ -219,7 +219,7 @@

 .sidebar-search {
    display: flex; align-items: center; gap: 7px;
-    padding: 6px 10px; margin: 8px 10px 4px;
+    padding: var(--sp-2) var(--sp-3); margin: var(--sp-2) var(--sp-3) var(--sp-1);
    background: var(--input-bg); border: 1px solid var(--border);
    border-radius: var(--radius); transition: border-color var(--transition);
 }
@@ -251,7 +251,7 @@
 .mobile-menu-btn {
    display: none; align-items: center; justify-content: center;
    background: none; border: none; color: var(--text-2);
-    cursor: pointer; padding: 4px; border-radius: var(--radius);
+    cursor: pointer; padding: var(--sp-1); border-radius: var(--radius);
    transition: color var(--transition);
 }
 .mobile-menu-btn:hover { color: var(--text); }
@@ -260,6 +260,11 @@
    background: var(--overlay);
 }

+@media (max-width: 1024px) {
+    .workspace-secondary.open { width: 360px; min-width: 360px; }
+    .admin-sidebar { width: 120px; }
+}
+
@media (max-width: 768px) {
    .sidebar { position: fixed; z-index: 100; height: 100%; transition: width 0.2s ease; }
    .sidebar.collapsed { width: 0; border: none; overflow: hidden; }
--- a/src/css/modals.css
+++ b/src/css/modals.css
@@ -8,7 +8,7 @@
    position: fixed; inset: 0; background: var(--overlay);
    display: none; align-items: center; justify-content: center;
    z-index: 1000; backdrop-filter: blur(2px);
-    padding: 2rem;  /* keeps modal away from viewport edges at any zoom */
+    padding: var(--sp-8);  /* keeps modal away from viewport edges at any zoom */
 }
 .modal-overlay.active { display: flex; }

@@ -23,7 +23,7 @@

 .modal-header {
    display: flex; align-items: center; justify-content: space-between;
-    padding: 16px 20px; border-bottom: 1px solid var(--border);
+    padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border);
 }
 .modal-header h2 { font-size: 16px; font-weight: 600; }
 .modal-close {
@@ -32,13 +32,13 @@
    transition: color var(--transition);
 }
 .modal-close:hover { color: var(--text); }
-.modal-body { flex: 1; overflow-y: auto; padding: 16px 20px; }
+.modal-body { flex: 1; overflow-y: auto; padding: var(--sp-4) var(--sp-5); }
 .modal-footer {
-    padding: 12px 20px; border-top: 1px solid var(--border);
-    display: flex; justify-content: flex-end; gap: 0.5rem;
+    padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--border);
+    display: flex; justify-content: flex-end; gap: var(--sp-2);
 }

-.avatar-upload-row { display: flex; align-items: center; gap: 14px; margin-bottom: 1rem; }
+.avatar-upload-row { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
 .avatar-preview {
    width: 56px; height: 56px; border-radius: 50%; background: var(--bg-raised);
    display: flex; align-items: center; justify-content: center;
@@ -46,7 +46,7 @@
    overflow: hidden; border: 2px solid var(--border);
 }
 .avatar-preview img { width: 100%; height: 100%; object-fit: cover; }
-.avatar-actions { display: flex; flex-direction: column; gap: 4px; }
+.avatar-actions { display: flex; flex-direction: column; gap: var(--sp-1); }
 .avatar-actions .form-hint { font-size: 11px; margin-left: 0; }
 .avatar-preview-sm { width: 42px; height: 42px; font-size: 18px; }

@@ -56,7 +56,7 @@
    border-bottom: 1px solid var(--border); background: var(--bg-raised);
 }
 .modal-tabs {
-    display: flex; padding: 0 16px;
+    display: flex; padding: 0 var(--sp-4);
    border-bottom: 1px solid var(--border); background: var(--bg-raised);
    overflow-x: auto; overflow-y: hidden;
    scrollbar-width: none; -ms-overflow-style: none;
@@ -83,7 +83,7 @@
 /* Settings tabs */
 .settings-tabs { gap: 0; }
 .settings-tabs .settings-tab {
-    padding: 10px 14px; background: none; border: none; border-radius: 0;
+    padding: var(--sp-3) var(--sp-3); background: none; border: none; border-radius: 0;
    color: var(--text-3); cursor: pointer; font-size: 13px; font-family: var(--font);
    border-bottom: 2px solid transparent; transition: color var(--transition);
    outline: none; -webkit-appearance: none; appearance: none;
@@ -94,19 +94,19 @@

 .settings-notice {
    background: rgba(234,179,8,0.08); border: 1px solid var(--warning-dim);
-    border-radius: var(--radius); padding: 10px 14px; font-size: 13px;
-    color: var(--warning); display: flex; align-items: center; gap: 8px;
+    border-radius: var(--radius); padding: var(--sp-3) var(--sp-3); font-size: 13px;
+    color: var(--warning); display: flex; align-items: center; gap: var(--sp-2);
    margin-top: 1rem;
 }

 /* Providers */
 .provider-row {
    display: flex; align-items: center; justify-content: space-between;
-    padding: 8px 0; border-bottom: 1px solid var(--border);
+    padding: var(--sp-2) 0; border-bottom: 1px solid var(--border);
 }
 .provider-name { font-weight: 500; font-size: 13px; }
-.provider-meta { font-size: 11px; color: var(--text-3); margin-left: 8px; }
-.provider-actions { display: flex; align-items: center; gap: 8px; }
+.provider-meta { font-size: 11px; color: var(--text-3); margin-left: var(--sp-2); }
+.provider-actions { display: flex; align-items: center; gap: var(--sp-2); }

 /* Admin panel (fullscreen) */
 .admin-panel {
@@ -144,18 +144,18 @@

 .admin-sidebar {
    width: 160px; flex-shrink: 0; border-right: 1px solid var(--border);
-    background: var(--bg-surface); padding: 0.75rem 0; overflow-y: auto;
+    background: var(--bg-surface); padding: var(--sp-3) 0; overflow-y: auto;
 }
 .admin-sidebar button {
    display: block; width: 100%; text-align: left; background: none; border: none;
-    padding: 8px 20px; color: var(--text-3); cursor: pointer;
+    padding: var(--sp-2) var(--sp-5); color: var(--text-3); cursor: pointer;
    font-size: 13px; font-family: var(--font); border-left: 3px solid transparent;
    transition: color 0.1s, background 0.1s;
 }
 .admin-sidebar button:hover { color: var(--text-2); background: var(--bg-raised); }
 .admin-sidebar button.active { color: var(--accent); border-left-color: var(--accent); background: var(--bg-raised); }

-.admin-main { flex: 1; overflow-y: auto; padding: 1.5rem 2rem; }
+.admin-main { flex: 1; overflow-y: auto; padding: var(--sp-6) var(--sp-8); }
 .admin-section-content { /* replaces .admin-tab-content */ }

 /* Admin shared */
@@ -169,14 +169,14 @@
 .admin-tab:hover { color: var(--text-2); }
 .admin-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

-.admin-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 1rem; }
+.admin-toolbar { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
 .admin-hint { font-size: 12px; color: var(--text-3); }
 .admin-inline-form {
    background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
-    padding: 1rem; margin-bottom: 1rem;
+    padding: var(--sp-4); margin-bottom: var(--sp-4);
 }
 .ext-edit-form {
-    background: var(--bg); padding: 12px 0;
+    background: var(--bg); padding: var(--sp-3) 0;
 }
 .ext-edit-form textarea {
    resize: vertical; min-height: 60px;
@@ -197,7 +197,7 @@
 .admin-user-actions .sw-btn--danger:hover { border-color: var(--danger); }
 .inline-select { background: var(--bg-surface); border: 1px solid var(--border); color: var(--text-2); border-radius: 4px; padding: 3px 8px; font-size: 12px; cursor: pointer; }

-.admin-model-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 14px; min-height: 44px; }
+.admin-model-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px solid var(--border); font-size: 14px; min-height: 44px; }
 .admin-model-row .model-name { flex: 1; font-weight: 500; }
 .admin-model-row .model-caps-inline { display: flex; gap: 3px; }
 .admin-model-row .provider-meta { min-width: 80px; text-align: right; color: var(--text-3); font-size: 12px; }
@@ -209,7 +209,7 @@
 .model-list-item.model-hidden .model-name { text-decoration: line-through; }

 .admin-provider-row {
-    display: flex; align-items: center; gap: 12px; padding: 10px 0;
+    display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--border); font-size: 14px;
 }
 .admin-provider-row .provider-name { font-weight: 500; flex: 1; }
@@ -219,7 +219,7 @@
 .admin-provider-row .btn-delete { background: none; border: none; color: var(--text-3); cursor: pointer; font-size: 16px; padding: 2px 6px; }
 .admin-provider-row .btn-delete:hover { color: var(--danger); }

-.admin-persona-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
+.admin-persona-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px solid var(--border); font-size: 14px; }
 .admin-persona-row .persona-info { flex: 1; min-width: 0; }
 .persona-row-avatar { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; vertical-align: middle; margin-right: 6px; }
 .persona-row-icon { margin-right: 4px; }
@@ -230,10 +230,10 @@
 .admin-persona-row .btn-delete:hover { color: var(--danger); }

 /* Stats cards */
-.stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
+.stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--sp-3); }
 .stat-card {
    background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
-    padding: 14px 16px; text-align: center;
+    padding: var(--sp-3) var(--sp-4); text-align: center;
 }
 .stat-card .stat-value { font-size: 1.6rem; font-weight: 700; color: var(--text); line-height: 1.2; }
 .stat-card .stat-label { font-size: 0.78rem; color: var(--text-3); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.04em; }
@@ -294,9 +294,9 @@
 .team-tab-content { padding: 0; }

 /* Health + Routing admin (v0.22.3) */
-.admin-health-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
-.admin-health-card { background: var(--bg-raised); border: 1px solid var(--border); border-radius: 8px; padding: 12px; }
-.list-card { background: var(--bg-raised); border: 1px solid var(--border); border-radius: 8px; padding: 12px; margin-bottom: 8px; }
+.admin-health-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sp-3); }
+.admin-health-card { background: var(--bg-raised); border: 1px solid var(--border); border-radius: 8px; padding: var(--sp-3); }
+.list-card { background: var(--bg-raised); border: 1px solid var(--border); border-radius: 8px; padding: var(--sp-3); margin-bottom: var(--sp-2); }
 .admin-user-row.user-inactive { opacity: 0.7; }


@@ -321,8 +321,8 @@
 }

 .cmd-input-wrap {
-    display: flex; align-items: center; gap: 10px;
-    padding: 12px 16px; border-bottom: 1px solid var(--border);
+    display: flex; align-items: center; gap: var(--sp-3);
+    padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border);
 }
 .cmd-input-wrap svg { color: var(--text-3); flex-shrink: 0; }
 .cmd-input-wrap input {
@@ -338,12 +338,12 @@

 .cmd-results {
    max-height: 320px; overflow-y: auto;
-    padding: 4px;
+    padding: var(--sp-1);
 }

 .cmd-item {
-    display: flex; align-items: center; gap: 10px;
-    padding: 8px 12px; border-radius: var(--radius);
+    display: flex; align-items: center; gap: var(--sp-3);
+    padding: var(--sp-2) var(--sp-3); border-radius: var(--radius);
    cursor: pointer; font-size: 13px; color: var(--text-2);
    transition: background 60ms ease, color 60ms ease;
 }
@@ -359,12 +359,12 @@
 .cmd-item.active .cmd-item-hint { color: var(--accent); }
 .cmd-group-label {
    font-size: 10px; font-weight: 600; color: var(--text-3);
-    padding: 8px 12px 4px; text-transform: uppercase; letter-spacing: 0.5px;
+    padding: var(--sp-2) var(--sp-3) var(--sp-1); text-transform: uppercase; letter-spacing: 0.5px;
 }

 .cmd-footer {
-    display: flex; align-items: center; gap: 16px;
-    padding: 8px 16px; border-top: 1px solid var(--border);
+    display: flex; align-items: center; gap: var(--sp-4);
+    padding: var(--sp-2) var(--sp-4); border-top: 1px solid var(--border);
    font-size: 11px; color: var(--text-3);
 }
 .cmd-footer kbd {
@@ -390,15 +390,15 @@
    animation: confirm-in 0.15s ease;
 }
 .confirm-header {
-    padding: 16px 20px 0; font-weight: 600; font-size: 15px; color: var(--text);
+    padding: var(--sp-4) var(--sp-5) 0; font-weight: 600; font-size: 15px; color: var(--text);
 }
 .confirm-body {
-    padding: 12px 20px 20px; font-size: 13px; color: var(--text-2);
+    padding: var(--sp-3) var(--sp-5) var(--sp-5); font-size: 13px; color: var(--text-2);
    line-height: 1.5; white-space: pre-wrap;
 }
 .confirm-footer {
-    display: flex; justify-content: flex-end; gap: 8px;
-    padding: 0 20px 16px;
+    display: flex; justify-content: flex-end; gap: var(--sp-2);
+    padding: 0 var(--sp-5) var(--sp-4);
 }
@keyframes confirm-in { from { opacity: 0; transform: scale(0.95); } }
@keyframes fade-in { from { opacity: 0; } }
@@ -406,7 +406,7 @@
 /* ── Group Chat persona picker (v0.23.0) ────── */
 .group-persona-item {
    display: flex; align-items: center; gap: 8px;
-    padding: 6px 10px; border-radius: var(--radius);
+    padding: var(--sp-2) var(--sp-3); border-radius: var(--radius);
    cursor: pointer; font-size: 13px;
    transition: background 0.1s;
 }
@@ -426,21 +426,21 @@
 .sb-dialog {
    background: var(--bg-raised); border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
-    padding: 20px 22px 16px;
+    padding: var(--sp-5) var(--sp-5) var(--sp-4);
    min-width: 300px; max-width: 420px; width: 90vw;
-    display: flex; flex-direction: column; gap: 12px;
+    display: flex; flex-direction: column; gap: var(--sp-3);
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    animation: confirm-in 0.15s ease;
 }
 .sb-dialog-title { font-size: 14px; font-weight: 600; color: var(--text); }
 .sb-dialog-input {
    background: var(--bg-surface); border: 1px solid var(--border);
-    border-radius: var(--radius); padding: 8px 10px;
+    border-radius: var(--radius); padding: var(--sp-2) var(--sp-3);
    font-size: 13px; color: var(--text);
    font-family: inherit; outline: none; width: 100%; box-sizing: border-box;
 }
 .sb-dialog-input:focus { border-color: var(--accent); }
-.sb-dialog-color-row { display: flex; align-items: center; gap: 10px; }
+.sb-dialog-color-row { display: flex; align-items: center; gap: var(--sp-3); }
 .sb-dialog-color-label { font-size: 12px; color: var(--text-2); }
 .sb-dialog-color-input { width: 32px; height: 26px; border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; padding: 1px; background: none; }
-.sb-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }
+.sb-dialog-actions { display: flex; justify-content: flex-end; gap: var(--sp-2); }
--- a/src/css/primitives.css
+++ b/src/css/primitives.css
@@ -15,7 +15,7 @@ button { font-family: var(--font); cursor: pointer; }
 select, input[type="text"], input[type="email"], input[type="password"],
 input[type="number"], input[type="search"], textarea {
    background: var(--bg-raised); border: 1px solid var(--border);
-    color: var(--text); padding: 8px 12px; border-radius: var(--radius);
+    color: var(--text); padding: var(--sp-2) var(--sp-3); border-radius: var(--radius);
    font-family: var(--font); font-size: 13px;
    transition: border-color var(--transition);
 }
@@ -25,7 +25,7 @@ input[type="password"]:focus, textarea:focus {
 }
 select option { background: var(--bg-surface); color: var(--text); }

-.form-row { display: flex; gap: 0.75rem; }
+.form-row { display: flex; gap: var(--sp-3); }
 .form-row .form-group { flex: 1; }
 .form-hint { font-weight: 400; color: var(--text-3); margin-left: 4px; }
 .range-input {
@@ -57,7 +57,7 @@ select option { background: var(--bg-surface); color: var(--text); }
 }

 .mode-selector {
-    display: flex; gap: 2px; padding: 6px 8px;
+    display: flex; gap: 2px; padding: var(--sp-2) var(--sp-2);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
 }
@@ -81,16 +81,16 @@ select option { background: var(--bg-surface); color: var(--text); }
 /* ── REPL Console (v0.21.3) ────────────── */

 .repl-toolbar {
-    display: flex; gap: 0.5rem; padding: 6px 12px;
+    display: flex; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3);
    border-bottom: 1px solid var(--border); font-size: 11px;
 }
 .repl-output {
-    flex: 1; overflow-y: auto; padding: 6px;
+    flex: 1; overflow-y: auto; padding: var(--sp-2);
    font-family: var(--mono); font-size: 12px; line-height: 1.6;
 }
 .repl-input-wrap {
    display: flex; align-items: flex-start; gap: 6px;
-    padding: 8px 12px; border-top: 1px solid var(--border);
+    padding: var(--sp-2) var(--sp-3); border-top: 1px solid var(--border);
    background: var(--bg-raised);
 }
 .repl-prompt {
@@ -149,7 +149,7 @@ select option { background: var(--bg-surface); color: var(--text); }
 .popup {
    display: none; position: absolute;
    background: var(--bg-raised); border: 1px solid var(--border-light);
-    border-radius: var(--radius-lg); padding: 4px;
+    border-radius: var(--radius-lg); padding: var(--sp-1);
    box-shadow: var(--shadow-lg); z-index: 300;
 }
 .popup.open { display: block; }
@@ -163,8 +163,8 @@ select option { background: var(--bg-surface); color: var(--text); }
 }
 .tools-popup { bottom: 100%; left: 0; margin-bottom: 8px; min-width: 210px; }
 .tools-popup-category, .tools-popup-tool {
-    display: flex; align-items: center; gap: 10px;
-    padding: 8px 12px; border-radius: var(--radius);
+    display: flex; align-items: center; gap: var(--sp-3);
+    padding: var(--sp-2) var(--sp-3); border-radius: var(--radius);
    cursor: pointer; font-size: 13px; color: var(--text-2);
    transition: background var(--transition);
 }
@@ -215,12 +215,12 @@ select option { background: var(--bg-surface); color: var(--text); }
    min-width: 240px; max-height: 300px; overflow-y: auto;
 }
 .kb-popup-header {
-    padding: 8px 12px 4px; font-size: 12px; font-weight: 600;
+    padding: var(--sp-2) var(--sp-3) var(--sp-1); font-size: 12px; font-weight: 600;
    color: var(--text-2); text-transform: uppercase; letter-spacing: 0.5px;
 }
 .kb-popup-item {
-    display: flex; align-items: center; gap: 8px;
-    padding: 6px 12px; cursor: pointer;
+    display: flex; align-items: center; gap: var(--sp-2);
+    padding: var(--sp-2) var(--sp-3); cursor: pointer;
    transition: background var(--transition);
 }
 .kb-popup-item:hover { background: var(--bg-hover); }
@@ -273,7 +273,7 @@ select option { background: var(--bg-surface); color: var(--text); }

 /* ── Shared Form Controls ────────────────── */

-.form-group { margin-bottom: 14px; }
+.form-group { margin-bottom: var(--sp-3); }
 .form-group label {
    display: block; font-size: 12px; font-weight: 500;
    color: var(--text-2); margin-bottom: 5px;
@@ -336,7 +336,7 @@ select option { background: var(--bg-surface); color: var(--text); }
 /* ── Icon Button ─────────────────────────── */
 .icon-btn {
    background: none; border: none; color: var(--text-3);
-    cursor: pointer; padding: 5px; border-radius: 7px;
+    cursor: pointer; padding: var(--sp-1); border-radius: 7px;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s;
 }
@@ -345,9 +345,9 @@ select option { background: var(--bg-surface); color: var(--text); }
 .icon-btn-danger:hover { color: var(--danger); }

 /* ── Utility States ─────────────────────── */
-.loading { color: var(--text-3); font-size: 13px; padding: 0.5rem; }
-.error-hint { color: var(--danger); font-size: 13px; padding: 0.5rem; }
-.empty-hint { color: var(--text-3); font-size: 13px; text-align: center; padding: 1rem; }
+.loading { color: var(--text-3); font-size: 13px; padding: var(--sp-2); }
+.error-hint { color: var(--danger); font-size: 13px; padding: var(--sp-2); }
+.empty-hint { color: var(--text-3); font-size: 13px; text-align: center; padding: var(--sp-4); }

 /* ── SDK Primitives (sw.menu, sw.dropdown, sw.toolbar, sw.tabs) ── */

@@ -366,8 +366,8 @@ select option { background: var(--bg-surface); color: var(--text); }
 .sw-menu-flyout[data-fixed] { position: fixed; }
 /* Flyout items — single source of truth for all flyout menus (sw.menu + UserMenu) */
 .sw-menu-flyout .flyout-item {
-    display: flex; align-items: center; gap: 10px;
-    padding: 8px 12px; border-radius: var(--radius, 6px);
+    display: flex; align-items: center; gap: var(--sp-3);
+    padding: var(--sp-2) var(--sp-3); border-radius: var(--radius, 6px);
    background: none; border: none; color: var(--text, #e8e8ed);
    cursor: pointer; font-size: 13px; font-family: inherit; width: 100%;
    transition: background 0.15s, color 0.15s;
@@ -381,15 +381,15 @@ select option { background: var(--bg-surface); color: var(--text); }
    background: var(--danger-dim, rgba(244,67,54,0.1)); color: var(--danger, #f44336);
 }
 .sw-menu-flyout .flyout-divider {
-    border: none; height: 1px; background: var(--border, #2a2a2e); margin: 4px 0;
+    border: none; height: 1px; background: var(--border, #2a2a2e); margin: var(--sp-1) 0;
 }

 /* Dropdown — see sw-primitives.css (.sw-dropdown) */

 /* Toolbar — horizontal button row */
 .sw-toolbar {
-    display: flex; align-items: center; gap: 4px;
-    padding: 4px 0;
+    display: flex; align-items: center; gap: var(--sp-1);
+    padding: var(--sp-1) 0;
 }

 /* Tabs — see sw-primitives.css (.sw-tabs) */
@@ -399,7 +399,7 @@ select option { background: var(--bg-surface); color: var(--text); }
@media (max-width: 768px) {
    /* Flyout items: larger touch targets */
    .sw-menu-flyout .flyout-item {
-        padding: 10px 12px;
+        padding: var(--sp-3) var(--sp-3);
        min-height: 44px;
    }

@@ -430,7 +430,7 @@ select option { background: var(--bg-surface); color: var(--text); }

 .sw-user-picker__input {
    width: 100%;
-    padding: 8px 10px;
+    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius, 6px);
    border: 1px solid var(--border, #2a2a2e);
    background: var(--bg, #0e0e10);
@@ -476,8 +476,8 @@ select option { background: var(--bg-surface); color: var(--text); }
 .sw-user-picker__option {
    display: flex;
    align-items: center;
-    gap: 8px;
-    padding: 8px 10px;
+    gap: var(--sp-2);
+    padding: var(--sp-2) var(--sp-3);
    cursor: pointer;
    transition: background 0.1s;
 }
--- a/src/css/surfaces.css
+++ b/src/css/surfaces.css
@@ -6,13 +6,13 @@

 .admin-storage-card {
    background: var(--bg-raised); border: 1px solid var(--border);
-    border-radius: var(--radius); padding: 16px; margin-bottom: 12px;
+    border-radius: var(--radius); padding: var(--sp-4); margin-bottom: var(--sp-3);
 }
-.admin-storage-card h4 { margin: 0 0 10px 0; font-size: 14px; }
-.admin-storage-desc { font-size: 12px; color: var(--text-3); margin: 0 0 10px 0; }
+.admin-storage-card h4 { margin: 0 0 var(--sp-3) 0; font-size: 14px; }
+.admin-storage-desc { font-size: 12px; color: var(--text-3); margin: 0 0 var(--sp-3) 0; }
 .admin-storage-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
-    gap: 10px;
+    gap: var(--sp-3);
 }
 .admin-storage-item { display: flex; flex-direction: column; gap: 2px; }
 .admin-storage-label { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.5px; }
@@ -31,8 +31,8 @@
    display: flex; height: 100%; overflow: hidden;
 }
 .settings-topbar {
-    display: flex; align-items: center; gap: 12px;
-    padding: 10px 20px; border-bottom: 1px solid var(--border);
+    display: flex; align-items: center; gap: var(--sp-3);
+    padding: var(--sp-3) var(--sp-5); border-bottom: 1px solid var(--border);
    background: var(--bg-surface); flex-shrink: 0;
 }
 .settings-topbar-back {
@@ -48,12 +48,12 @@
    width: 220px; flex-shrink: 0;
    border-right: 1px solid var(--border);
    background: var(--bg-surface);
-    padding: 12px 8px; overflow-y: auto;
+    padding: var(--sp-3) var(--sp-2); overflow-y: auto;
    display: flex; flex-direction: column; gap: 2px;
 }
 .settings-nav-link {
-    display: flex; align-items: center; gap: 8px;
-    padding: 8px 12px; border-radius: 8px;
+    display: flex; align-items: center; gap: var(--sp-2);
+    padding: var(--sp-2) var(--sp-3); border-radius: 8px;
    color: var(--text-2); text-decoration: none;
    font-size: 13px; font-weight: 500; transition: all 0.12s;
    border: none; background: none; cursor: pointer;
@@ -61,28 +61,28 @@
 }
 .settings-nav-link:hover { background: var(--bg-hover); color: var(--text); text-decoration: none; }
 .settings-nav-link.active { background: var(--accent-dim); color: var(--accent); }
-.settings-nav-sep { margin: 8px 0; border-top: 1px solid var(--border); }
-.settings-content { flex: 1; overflow-y: auto; padding: 28px; }
-.settings-content h2 { font-size: 18px; font-weight: 600; margin: 0 0 20px; }
+.settings-nav-sep { margin: var(--sp-2) 0; border-top: 1px solid var(--border); }
+.settings-content { flex: 1; overflow-y: auto; padding: var(--sp-8); }
+.settings-content h2 { font-size: 18px; font-weight: 600; margin: 0 0 var(--sp-5); }
 .settings-content .settings-section {
    background: none; border: none; border-radius: 0;
-    padding: 0 0 16px; margin-bottom: 20px; max-width: 560px;
+    padding: 0 0 var(--sp-4); margin-bottom: var(--sp-5); max-width: 560px;
 }
 .settings-content .settings-section h3 {
-    font-size: 14px; font-weight: 600; margin: 0 0 14px;
-    padding-bottom: 8px; border-bottom: 1px solid var(--border);
+    font-size: 14px; font-weight: 600; margin: 0 0 var(--sp-3);
+    padding-bottom: var(--sp-2); border-bottom: 1px solid var(--border);
 }
 .settings-section {
-    margin-bottom: 24px; padding: 20px;
+    margin-bottom: var(--sp-6); padding: var(--sp-5);
    background: var(--bg-surface); border-radius: 10px;
    border: 1px solid var(--border);
 }
 .settings-section h3 {
-    font-size: 15px; font-weight: 600; margin: 0 0 16px;
-    padding-bottom: 10px; border-bottom: 1px solid var(--border);
+    font-size: 15px; font-weight: 600; margin: 0 0 var(--sp-4);
+    padding-bottom: var(--sp-3); border-bottom: 1px solid var(--border);
 }
 .settings-placeholder {
-    padding: 40px 20px; color: var(--text-3);
+    padding: var(--sp-10) var(--sp-5); color: var(--text-3);
    text-align: center; font-size: 13px;
 }

@@ -92,8 +92,8 @@
    display: flex; flex-direction: column; height: 100%; overflow: hidden;
 }
 .admin-topbar {
-    display: flex; align-items: center; gap: 12px;
-    padding: 10px 20px; border-bottom: 1px solid var(--border);
+    display: flex; align-items: center; gap: var(--sp-3);
+    padding: var(--sp-3) var(--sp-5); border-bottom: 1px solid var(--border);
    background: var(--bg-surface); flex-shrink: 0;
 }
 .admin-topbar-back {
@@ -123,10 +123,10 @@
 .admin-nav {
    width: 200px; background: var(--bg-surface);
    border-right: 1px solid var(--border);
-    padding: 12px 8px; display: flex; flex-direction: column; gap: 2px; flex-shrink: 0;
+    padding: var(--sp-3) var(--sp-2); display: flex; flex-direction: column; gap: 2px; flex-shrink: 0;
 }
 .admin-nav-link {
-    display: flex; padding: 8px 12px; border-radius: 8px;
+    display: flex; padding: var(--sp-2) var(--sp-3); border-radius: 8px;
    border: none; cursor: pointer; font-family: inherit;
    font-size: 13px; font-weight: 500; width: 100%;
    text-align: left; transition: all 0.12s;
@@ -137,30 +137,30 @@
 .admin-nav-link.active { background: var(--accent-dim); color: var(--accent); }
 .admin-content { flex: 1; display: flex; flex-direction: column; min-width: 0; }
 .admin-content-header {
-    display: flex; align-items: center; gap: 12px;
-    padding: 14px 24px; border-bottom: 1px solid var(--border); flex-shrink: 0;
+    display: flex; align-items: center; gap: var(--sp-3);
+    padding: var(--sp-3) var(--sp-6); border-bottom: 1px solid var(--border); flex-shrink: 0;
 }
 .admin-content-header h2 { font-size: 16px; font-weight: 600; margin: 0; }
 .admin-search {
    display: flex; align-items: center; gap: 7px;
    background: var(--input-bg, var(--bg)); border-radius: 8px;
-    padding: 6px 10px; border: 1px solid var(--border); width: 220px;
+    padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border); width: 220px;
 }
 .admin-search input {
    background: none; border: none; color: var(--text);
    font-size: 12px; font-family: inherit; flex: 1; outline: none;
 }
-.admin-content-body { flex: 1; overflow-y: auto; padding: 24px; }
+.admin-content-body { flex: 1; overflow-y: auto; padding: var(--sp-6); }

 /* ── Data Tables ─────────────────────────── */
 .data-table { width: 100%; border-collapse: collapse; }
 .data-table th {
-    padding: 10px 14px; text-align: left; font-weight: 600;
+    padding: var(--sp-3) var(--sp-3); text-align: left; font-weight: 600;
    font-size: 11px; color: var(--text-3); text-transform: uppercase;
    letter-spacing: 0.5px; border-bottom: 1px solid var(--border);
 }
 .data-table td {
-    padding: 10px 14px; font-size: 13px;
+    padding: var(--sp-3) var(--sp-3); font-size: 13px;
    border-bottom: 1px solid var(--border);
 }
 .data-table tr:hover td { background: var(--bg-hover); }
@@ -171,8 +171,8 @@
    display: flex; flex-direction: column; height: 100%; overflow: hidden;
 }
 .editor-topbar {
-    display: flex; align-items: center; gap: 8px;
-    padding: 6px 12px; border-bottom: 1px solid var(--border);
+    display: flex; align-items: center; gap: var(--sp-2);
+    padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border);
    background: var(--bg-surface); flex-shrink: 0;
 }
 .editor-topbar-back {
@@ -189,10 +189,10 @@
    display: flex; flex-direction: column; flex-shrink: 0;
 }
 .editor-tree-header {
-    padding: 8px 10px; border-bottom: 1px solid var(--border);
+    padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: 6px;
 }
-.editor-tree-files { flex: 1; overflow-y: auto; padding: 4px 0; }
+.editor-tree-files { flex: 1; overflow-y: auto; padding: var(--sp-1) 0; }
 .editor-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
 .editor-tabs {
    display: flex; align-items: center;
@@ -201,7 +201,7 @@
 }
 .editor-tab {
    display: flex; align-items: center; gap: 6px;
-    padding: 6px 12px; cursor: pointer; font-size: 12px;
+    padding: var(--sp-2) var(--sp-3); cursor: pointer; font-size: 12px;
    white-space: nowrap; border-right: 1px solid var(--border);
    background: transparent; color: var(--text-3);
    border-bottom: 2px solid transparent;
@@ -214,23 +214,23 @@
 }
 .editor-content { flex: 1; overflow: auto; }
 .editor-statusbar {
-    display: flex; align-items: center; gap: 14px;
-    padding: 3px 12px; background: var(--bg-surface);
+    display: flex; align-items: center; gap: var(--sp-3);
+    padding: 3px var(--sp-3); background: var(--bg-surface);
    border-top: 1px solid var(--border); flex-shrink: 0;
    font-size: 11px; color: var(--text-3);
    font-family: var(--mono);
 }
 /* ── Stat Cards Grid ──────────────────────── */
-.stat-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; margin-bottom: 24px; }
+.stat-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-6); }
 .stat-card {
-    background: var(--bg-surface); border: 1px solid var(--border); border-radius: 10px; padding: 16px;
+    background: var(--bg-surface); border: 1px solid var(--border); border-radius: 10px; padding: var(--sp-4);
 }
-.stat-card-label { font-size: 11px; color: var(--text-3); font-weight: 500; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.04em; }
+.stat-card-label { font-size: 11px; color: var(--text-3); font-weight: 500; margin-bottom: var(--sp-2); text-transform: uppercase; letter-spacing: 0.04em; }
 .stat-card-value { font-size: 24px; font-weight: 700; line-height: 1; }
 .stat-card-sub { font-size: 11px; color: var(--text-3); margin-top: 4px; }

 /* ── Bar Chart ───────────────────────────── */
-.bar-chart { display: flex; align-items: flex-end; gap: 8px; height: 140px; }
+.bar-chart { display: flex; align-items: flex-end; gap: var(--sp-2); height: 140px; }
 .bar-chart-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
 .bar-chart-val { font-size: 10px; color: var(--text-3); font-family: var(--mono); }
 .bar-chart-track { width: 100%; background: var(--accent-dim); border-radius: 4px; position: relative; height: 100px; }
@@ -291,22 +291,28 @@
 .admin-actions-cell { white-space: nowrap; text-align: right; }

 /* ── Provider Cards ──────────────────────── */
-.provider-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
+.provider-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-4); }
 .provider-card {
    background: var(--bg-surface); border: 1px solid var(--border); border-radius: 8px;
-    padding: 16px; cursor: pointer; transition: border-color var(--transition), box-shadow var(--transition);
+    padding: var(--sp-4); cursor: pointer; transition: border-color var(--transition), box-shadow var(--transition);
 }
 .provider-card:hover { border-color: var(--accent); box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
-.provider-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
+.provider-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--sp-3); }
 .provider-card-name { font-weight: 600; font-size: 14px; }
 .provider-card-meta { display: flex; gap: 6px; align-items: center; margin-top: 4px; flex-wrap: wrap; }


-@media (max-width: 768px) {
-    .settings-nav { width: 160px; font-size: 12px; padding: 12px 8px; }
-    .settings-content { padding: 16px; }
+@media (max-width: 1024px) {
+    .settings-nav { width: 180px; }
    .admin-nav { width: 160px; }
-    .admin-content-body { padding: 16px; }
+    .editor-tree { width: 180px; }
+}
+
+@media (max-width: 768px) {
+    .settings-nav { width: 160px; font-size: 12px; padding: var(--sp-3) var(--sp-2); }
+    .settings-content { padding: var(--sp-4); }
+    .admin-nav { width: 160px; }
+    .admin-content-body { padding: var(--sp-4); }
    .editor-tree { width: 180px; }
 }

--- a/src/css/sw-login.css
+++ b/src/css/sw-login.css
@@ -66,7 +66,7 @@
 /* ── Auth Panel (right) ────────────────────── */
 .login-auth-panel {
    width: 440px; flex-shrink: 0; display: flex; align-items: center;
-    justify-content: center; padding: 2rem; background: var(--bg-surface);
+    justify-content: center; padding: var(--sp-8); background: var(--bg-surface);
    border-left: 1px solid var(--border); overflow-y: auto;
 }
 .login-auth-inner { width: 100%; max-width: 340px; }
@@ -84,7 +84,7 @@
 .login-auth-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
 .login-auth-tab:hover  { color: var(--text-2); }

-.login-form-field { margin-bottom: 16px; }
+.login-form-field { margin-bottom: var(--sp-4); }
 .login-form-field label {
    display: block; font-size: 13px; font-weight: 500;
    color: var(--text-2); margin-bottom: 6px;
@@ -92,7 +92,7 @@
 .login-form-field input {
    width: 100%; box-sizing: border-box; background: var(--input-bg);
    border: 1px solid var(--border); color: var(--text);
-    padding: 10px 14px; border-radius: 10px; font-size: 14px; font-family: var(--font);
+    padding: var(--sp-3) var(--sp-3); border-radius: 10px; font-size: 14px; font-family: var(--font);
    outline: none; transition: border-color 0.15s, box-shadow 0.15s;
 }
 .login-form-field input:focus {
@@ -113,7 +113,7 @@

 .login-btn {
    width: 100%; background: var(--accent); color: #fff; border: none;
-    padding: 10px 18px; font-size: 14px; border-radius: 10px; cursor: pointer;
+    padding: var(--sp-3) var(--sp-5); font-size: 14px; border-radius: 10px; cursor: pointer;
    font-family: var(--font); font-weight: 600; letter-spacing: -0.01em;
    transition: all 0.18s; margin-top: 1.5rem;
 }
@@ -158,7 +158,7 @@
 .login-anim-a3 { animation-delay: .29s; }

 /* ── Responsive ─────────────────────────────── */
-@media (max-width: 900px) {
+@media (max-width: 1024px) {
    .login-hero { display: none; }
    .login-auth-panel { width: 100%; border-left: none; }
 }
--- a/src/css/sw-primitives.css
+++ b/src/css/sw-primitives.css
@@ -13,9 +13,9 @@
    white-space: nowrap; position: relative;
 }
 .sw-btn:disabled { opacity: 0.5; cursor: not-allowed; }
-.sw-btn--sm { padding: 0.3rem 0.65rem; font-size: 0.8rem; }
-.sw-btn--md { padding: 0.45rem 0.9rem; font-size: 0.875rem; }
-.sw-btn--lg { padding: 0.6rem 1.2rem; font-size: 1rem; }
+.sw-btn--sm { padding: var(--sp-1) var(--sp-2); font-size: 0.8rem; }
+.sw-btn--md { padding: var(--sp-2) var(--sp-3); font-size: 0.875rem; }
+.sw-btn--lg { padding: var(--sp-2) var(--sp-4); font-size: 1rem; }

 .sw-btn--primary { background: var(--accent); color: var(--text-on-color); }
 .sw-btn--primary:hover:not(:disabled) { background: var(--accent-hover); }
@@ -62,7 +62,7 @@

 /* ── FormField ─────────────────────────────── */

-.sw-field { display: flex; flex-direction: column; gap: 0.3rem; }
+.sw-field { display: flex; flex-direction: column; gap: var(--sp-1); }
 .sw-field__label { font-size: 0.8rem; font-weight: 500; color: var(--text-2); }
 .sw-field__required { color: var(--danger); margin-left: 2px; }
 .sw-field__error { font-size: 0.75rem; color: var(--danger); }
@@ -72,7 +72,7 @@
 /* ── Shared input ──────────────────────────── */

 .sw-input {
-    width: 100%; padding: 0.45rem 0.7rem; background: var(--input-bg);
+    width: 100%; padding: var(--sp-2) var(--sp-3); background: var(--input-bg);
    color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
    font-family: var(--font); font-size: 0.875rem; outline: none;
    transition: border-color var(--transition);
@@ -84,7 +84,7 @@

 .sw-tooltip-wrap { position: relative; display: inline-flex; }
 .sw-tooltip {
-    position: absolute; z-index: 1000; padding: 0.3rem 0.6rem;
+    position: absolute; z-index: 1000; padding: var(--sp-1) var(--sp-2);
    background: var(--bg-elevated); color: var(--text); border: 1px solid var(--border);
    border-radius: var(--radius); font-size: 0.75rem; white-space: nowrap;
    pointer-events: none; animation: sw-fade-in 0.15s ease;
@@ -100,7 +100,7 @@

 .sw-banner {
    display: flex; align-items: center; justify-content: center;
-    gap: 0.5rem; padding: 0.5rem 1rem; font-size: 0.85rem; font-weight: 500;
+    gap: var(--sp-2); padding: var(--sp-2) var(--sp-4); font-size: 0.85rem; font-weight: 500;
    width: 100%; flex-shrink: 0;
 }
 .sw-banner--info { background: var(--accent-dim); color: var(--accent-light); }
@@ -116,13 +116,13 @@
 /* ── Toast ─────────────────────────────────── */

 .sw-toast-container {
-    position: fixed; bottom: 1rem; right: 1rem; z-index: 10000;
-    display: flex; flex-direction: column-reverse; gap: 0.5rem;
+    position: fixed; bottom: var(--sp-4); right: var(--sp-4); z-index: 10000;
+    display: flex; flex-direction: column-reverse; gap: var(--sp-2);
    max-width: 380px; pointer-events: none;
 }
 .sw-toast {
-    display: flex; align-items: center; gap: 0.75rem;
-    padding: 0.75rem 1rem; border-radius: var(--radius-lg);
+    display: flex; align-items: center; gap: var(--sp-3);
+    padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-lg);
    background: var(--bg-raised); border: 1px solid var(--border);
    box-shadow: var(--shadow-lg); pointer-events: auto;
    font-size: 0.875rem;
@@ -158,7 +158,7 @@
 }
 .sw-dialog__header {
    display: flex; align-items: center; justify-content: space-between;
-    padding: 1rem 1.25rem 0.75rem; border-bottom: 1px solid var(--border);
+    padding: var(--sp-4) var(--sp-5) var(--sp-3); border-bottom: 1px solid var(--border);
 }
 .sw-dialog__title { font-size: 1rem; font-weight: 600; color: var(--text); margin: 0; }
 .sw-dialog__close {
@@ -166,10 +166,10 @@
    font-size: 1.3rem; padding: 0; line-height: 1;
 }
 .sw-dialog__close:hover { color: var(--text); }
-.sw-dialog__body { padding: 1rem 1.25rem; overflow-y: auto; color: var(--text); font-size: 0.9rem; line-height: 1.5; }
+.sw-dialog__body { padding: var(--sp-4) var(--sp-5); overflow-y: auto; color: var(--text); font-size: 0.9rem; line-height: 1.5; }
 .sw-dialog__actions {
-    display: flex; gap: 0.5rem; justify-content: flex-end;
-    padding: 0.75rem 1.25rem; border-top: 1px solid var(--border);
+    display: flex; gap: var(--sp-2); justify-content: flex-end;
+    padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--border);
 }

@keyframes sw-scale-in { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@@ -180,11 +180,11 @@
    z-index: 6000; min-width: 160px; max-width: 300px;
    background: var(--bg-surface); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow-lg);
-    padding: 4px 0; outline: none; animation: sw-fade-in 0.1s ease;
+    padding: var(--sp-1) 0; outline: none; animation: sw-fade-in 0.1s ease;
 }
 .sw-menu__item {
-    display: flex; align-items: center; gap: 0.5rem;
-    padding: 0.4rem 0.75rem; cursor: pointer; font-size: 0.85rem;
+    display: flex; align-items: center; gap: var(--sp-2);
+    padding: var(--sp-1) var(--sp-3); cursor: pointer; font-size: 0.85rem;
    color: var(--text); transition: background var(--transition);
 }
 .sw-menu__item:hover, .sw-menu__item--focused { background: var(--bg-hover); }
@@ -193,11 +193,11 @@
 .sw-menu__icon { flex-shrink: 0; width: 1.1em; text-align: center; color: var(--text-2); }
 .sw-menu__label { flex: 1; }
 .sw-menu__arrow { font-size: 0.6em; color: var(--text-3); }
-.sw-menu__divider { height: 1px; background: var(--border); margin: 4px 0; }
+.sw-menu__divider { height: 1px; background: var(--border); margin: var(--sp-1) 0; }

@media (max-width: 768px) {
    .sw-menu { max-width: calc(100vw - 16px); }
-    .sw-menu__item { min-height: 44px; padding: 0.5rem 0.75rem; }
+    .sw-menu__item { min-height: 44px; padding: var(--sp-2) var(--sp-3); }
 }

 /* ── Drawer ────────────────────────────────── */
@@ -221,7 +221,7 @@
 .sw-drawer--left.sw-drawer--open { transform: translateX(0); }
 .sw-drawer__header {
    display: flex; align-items: center; justify-content: space-between;
-    padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); flex-shrink: 0;
+    padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border); flex-shrink: 0;
 }
 .sw-drawer__title { font-size: 1rem; font-weight: 600; color: var(--text); margin: 0; }
 .sw-drawer__close {
@@ -229,7 +229,7 @@
    font-size: 1.3rem; padding: 0; line-height: 1;
 }
 .sw-drawer__close:hover { color: var(--text); }
-.sw-drawer__body { flex: 1; overflow-y: auto; padding: 1rem 1.25rem; }
+.sw-drawer__body { flex: 1; overflow-y: auto; padding: var(--sp-4) var(--sp-5); }

 /* ── Tabs ──────────────────────────────────── */

@@ -243,7 +243,7 @@
 }
 .sw-tabs__scroll::-webkit-scrollbar { display: none; }
 .sw-tabs__tab {
-    padding: 0.5rem 0.9rem; background: none; border: none;
+    padding: var(--sp-2) var(--sp-3); background: none; border: none;
    border-bottom: 2px solid transparent; color: var(--text-2);
    font-family: var(--font); font-size: 0.85rem; font-weight: 500;
    cursor: pointer; white-space: nowrap;
@@ -264,7 +264,7 @@
 .sw-dropdown { position: relative; display: inline-block; }
 .sw-dropdown__trigger {
    display: flex; align-items: center; justify-content: space-between;
-    gap: 0.5rem; width: 100%; padding: 0.45rem 0.7rem;
+    gap: var(--sp-2); width: 100%; padding: var(--sp-2) var(--sp-3);
    background: var(--input-bg); color: var(--text);
    border: 1px solid var(--border); border-radius: var(--radius);
    font-family: var(--font); font-size: 0.875rem; cursor: pointer;
@@ -280,13 +280,13 @@
    border-radius: var(--radius); box-shadow: var(--shadow-lg);
    animation: sw-fade-in 0.1s ease;
 }
-.sw-dropdown__search { margin: 4px; width: calc(100% - 8px); }
+.sw-dropdown__search { margin: var(--sp-1); width: calc(100% - var(--sp-2)); }
 .sw-dropdown__option {
-    padding: 0.4rem 0.75rem; cursor: pointer; font-size: 0.85rem;
+    padding: var(--sp-1) var(--sp-3); cursor: pointer; font-size: 0.85rem;
    color: var(--text); transition: background var(--transition);
 }
 .sw-dropdown__option:hover, .sw-dropdown__option--focused { background: var(--bg-hover); }
 .sw-dropdown__option--selected { color: var(--accent); font-weight: 500; }
 .sw-dropdown__option--disabled { opacity: 0.4; cursor: not-allowed; }
 .sw-dropdown__option--disabled:hover { background: transparent; }
-.sw-dropdown__empty { padding: 0.75rem; text-align: center; color: var(--text-3); font-size: 0.85rem; }
+.sw-dropdown__empty { padding: var(--sp-3); text-align: center; color: var(--text-3); font-size: 0.85rem; }
--- a/src/css/sw-shell.css
+++ b/src/css/sw-shell.css
@@ -24,8 +24,8 @@
    display: flex;
    align-items: center;
    justify-content: center;
-    gap: 0.5rem;
-    padding: 0.45rem 1rem;
+    gap: var(--sp-2);
+    padding: var(--sp-2) var(--sp-4);
    font-size: 0.8rem;
    font-weight: 500;
 }
@@ -75,8 +75,8 @@
 .sw-shell__announcement-inner {
    display: flex;
    align-items: center;
-    gap: 0.75rem;
-    padding: 0.6rem 1.25rem;
+    gap: var(--sp-3);
+    padding: var(--sp-2) var(--sp-5);
    font-size: 0.85rem;
 }

@@ -101,7 +101,7 @@

 .sw-shell__footer {
    flex-shrink: 0;
-    padding: 0.5rem 1rem;
+    padding: var(--sp-2) var(--sp-4);
    border-top: 1px solid var(--border);
    font-size: 0.75rem;
    color: var(--text-3);
@@ -125,11 +125,11 @@
    display: flex;
    align-items: center;
    height: 44px;
-    padding: 0 12px;
+    padding: 0 var(--sp-3);
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
-    gap: 10px;
+    gap: var(--sp-3);
 }

 .sw-topbar__title {
@@ -147,13 +147,13 @@
 .sw-topbar__slot {
    display: flex;
    align-items: center;
-    gap: 8px;
+    gap: var(--sp-2);
 }

 .sw-topbar__right {
    display: flex;
    align-items: center;
-    gap: 8px;
+    gap: var(--sp-2);
 }

 /* ── User menu trigger ───────────────────── */
@@ -241,7 +241,7 @@
    display: flex;
    align-items: center;
    justify-content: space-between;
-    padding: 10px 14px;
+    padding: var(--sp-3) var(--sp-3);
    border-bottom: 1px solid var(--border, #2a2a2e);
    font-size: 13px;
    font-weight: 600;
@@ -268,14 +268,14 @@
 }

 .sw-notification-bell__empty {
-    padding: 24px 14px;
+    padding: var(--sp-6) var(--sp-3);
    text-align: center;
    color: var(--text-3, #555);
    font-size: 12px;
 }

 .sw-notification-bell__item {
-    padding: 10px 14px;
+    padding: var(--sp-3) var(--sp-3);
    border-bottom: 1px solid var(--border, #2a2a2e);
    cursor: pointer;
    transition: background 0.15s;
--- a/src/css/user-menu.css
+++ b/src/css/user-menu.css
@@ -19,8 +19,8 @@
 .user-menu-wrap .user-btn {
    display: flex;
    align-items: center;
-    gap: 8px;
-    padding: 6px 8px;
+    gap: var(--sp-2);
+    padding: var(--sp-2) var(--sp-2);
    border-radius: var(--radius, 6px);
    background: none;
    border: none;
@@ -78,7 +78,7 @@
 /* Sidebar collapsed: hide label, center avatar */
 .sidebar.collapsed .user-menu-wrap .user-btn {
    justify-content: center;
-    padding: 6px 0;
+    padding: var(--sp-2) 0;
    gap: 0;
 }

@@ -101,7 +101,7 @@
@media (max-width: 768px) {
    /* User menu button: ensure 44px touch target */
    .user-menu-wrap .user-btn {
-        padding: 8px;
+        padding: var(--sp-2);
        min-height: 44px;
    }

--- a/src/css/variables.css
+++ b/src/css/variables.css
@@ -67,6 +67,23 @@
    --mono:         'JetBrains Mono', 'Söhne Mono', 'SF Mono', 'Fira Code', 'Consolas', monospace;
    --transition:   180ms ease;

+    /* -- Spacing (4px grid) ------------------- */
+    --sp-1:  0.25rem;   /*  4px */
+    --sp-2:  0.5rem;    /*  8px */
+    --sp-3:  0.75rem;   /* 12px */
+    --sp-4:  1rem;      /* 16px */
+    --sp-5:  1.25rem;   /* 20px */
+    --sp-6:  1.5rem;    /* 24px */
+    --sp-8:  2rem;      /* 32px */
+    --sp-10: 2.5rem;    /* 40px */
+    --sp-12: 3rem;      /* 48px */
+
+    /* -- Breakpoints --------------------------
+       Mobile:  max-width: 768px
+       Tablet:  max-width: 1024px
+       Desktop: default (no query)
+       ----------------------------------------- */
+
    /* Banner system — set by JS from /api/v1/admin/settings/banner */
    --banner-top-height: 0px;
    --banner-bottom-height: 0px;
@@ -1 +1 @@
 .6.12
 .6.13