zhimo-ui 0.1.0

package/src/layout.js

@@ -0,0 +1,95 @@
+/* ZhiMo UI 布局组件：zhimo-card / zhimo-divider */
+
+class ZhimoCard extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          font-family: var(--zhimo-font);
+          background: var(--zhimo-surface-bg);
+          backdrop-filter: var(--zhimo-surface-blur);
+          -webkit-backdrop-filter: var(--zhimo-surface-blur);
+          border: 1px solid var(--zhimo-border);
+          border-radius: var(--zhimo-radius);
+          box-shadow: none;
+          overflow: hidden;
+          transition: box-shadow var(--zhimo-transition), border-color var(--zhimo-transition),
+                      transform var(--zhimo-transition);
+        }
+        :host([hoverable]:hover) {
+          box-shadow: var(--zhimo-shadow-md);
+          border-color: var(--zhimo-fg);
+          transform: translateY(-1px);
+        }
+        header {
+          padding: 14px 18px;
+          border-bottom: 1px solid var(--zhimo-border);
+          font-family: var(--zhimo-font-serif);
+          font-size: 15px;
+          font-weight: 600;
+          color: var(--zhimo-fg);
+        }
+        .body {
+          padding: 18px;
+          font-size: 14px;
+          line-height: 1.6;
+          color: var(--zhimo-fg);
+        }
+        footer {
+          display: flex;
+          justify-content: flex-end;
+          gap: 8px;
+          padding: 12px 18px;
+          border-top: 1px solid var(--zhimo-border);
+          background: color-mix(in srgb, var(--zhimo-bg-subtle) 72%, transparent);
+        }
+        header[hidden], footer[hidden] { display: none; }
+      </style>
+      <header part="header"><slot name="header"></slot></header>
+      <div class="body" part="body"><slot></slot></div>
+      <footer part="footer"><slot name="footer"></slot></footer>
+    `;
+    // header / footer 没有内容时整块隐藏
+    for (const name of ['header', 'footer']) {
+      const slot = this.shadowRoot.querySelector(`slot[name="${name}"]`);
+      const wrap = slot.parentElement;
+      const sync = () => { wrap.hidden = slot.assignedNodes().length === 0; };
+      slot.addEventListener('slotchange', sync);
+      sync();
+    }
+  }
+}
+
+class ZhimoDivider extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: flex;
+          align-items: center;
+          gap: 12px;
+          margin: 16px 0;
+          font-family: var(--zhimo-font-serif);
+          font-size: 13px;
+          color: var(--zhimo-fg-muted);
+        }
+        :host::before, :host::after {
+          content: '';
+          flex: 1;
+          height: 1px;
+          background: var(--zhimo-border-strong);
+        }
+        .mark { color: var(--zhimo-seal); font-size: 8px; line-height: 1; }
+      </style>
+      <slot><span class="mark">◆</span></slot>
+    `;
+  }
+}
+
+customElements.define('zhimo-card', ZhimoCard);
+customElements.define('zhimo-divider', ZhimoDivider);

package/src/menu.js

@@ -0,0 +1,309 @@
+/* ZhiMo UI 菜单组件：zhimo-dropdown + zhimo-menu-item / zhimo-select + zhimo-option */
+
+const PANEL_CSS = `
+  .panel {
+    position: fixed;
+    z-index: 1100;
+    min-width: 140px;
+    max-height: 60vh;
+    overflow-y: auto;
+    padding: 4px;
+    box-sizing: border-box;
+    background: var(--zhimo-surface-bg);
+    backdrop-filter: var(--zhimo-surface-blur);
+    -webkit-backdrop-filter: var(--zhimo-surface-blur);
+    border: 1px solid var(--zhimo-border-strong);
+    border-radius: var(--zhimo-radius);
+    box-shadow: var(--zhimo-shadow-md);
+    font-family: var(--zhimo-font);
+    animation: zhimo-panel-in 120ms cubic-bezier(0.16, 1, 0.3, 1);
+  }
+  .panel[hidden] { display: none; }
+  @keyframes zhimo-panel-in { from { opacity: 0; transform: translateY(-4px); } }
+`;
+
+/* 浮层共用逻辑：定位、视口收敛、点外关闭、Esc 关闭 */
+class ZhimoPopupBase extends HTMLElement {
+  connectedCallback() {
+    this._onDocClick = (e) => {
+      if (!e.composedPath().includes(this)) this.close();
+    };
+    this._onKeydown = (e) => {
+      if (e.key === 'Escape') { this.close(); }
+      else this._handleKey?.(e);
+    };
+  }
+
+  disconnectedCallback() {
+    this._unbind();
+  }
+
+  _bind() {
+    document.addEventListener('pointerdown', this._onDocClick, true);
+    document.addEventListener('keydown', this._onKeydown, true);
+  }
+
+  _unbind() {
+    document.removeEventListener('pointerdown', this._onDocClick, true);
+    document.removeEventListener('keydown', this._onKeydown, true);
+  }
+
+  get open() { return !this._panel.hidden; }
+
+  openAt(x, y) {
+    this._panel.hidden = false;
+    this._panel.style.left = '0px';
+    this._panel.style.top = '0px';
+    this._bind();
+    // 先渲染再量尺寸，贴边时往回收
+    requestAnimationFrame(() => {
+      const { offsetWidth: w, offsetHeight: h } = this._panel;
+      this._panel.style.left = `${Math.max(8, Math.min(x, innerWidth - w - 8))}px`;
+      this._panel.style.top = `${Math.max(8, Math.min(y, innerHeight - h - 8))}px`;
+    });
+    this.setAttribute('open', '');
+  }
+
+  openBelow(el) {
+    const r = el.getBoundingClientRect();
+    this._panel.style.minWidth = `${r.width}px`;
+    this.openAt(r.left, r.bottom + 4);
+  }
+
+  close() {
+    if (this._panel.hidden) return;
+    this._panel.hidden = true;
+    this.removeAttribute('open');
+    this._unbind();
+    this.dispatchEvent(new CustomEvent('close', { bubbles: true, composed: true }));
+  }
+}
+
+class ZhimoDropdown extends ZhimoPopupBase {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host { display: inline-block; }
+        ${PANEL_CSS}
+      </style>
+      <span part="trigger"><slot name="trigger"></slot></span>
+      <div class="panel" part="panel" role="menu" hidden><slot></slot></div>
+    `;
+    this._panel = this.shadowRoot.querySelector('.panel');
+
+    const trigger = this.shadowRoot.querySelector('[part="trigger"]');
+    trigger.addEventListener('click', (e) => {
+      e.stopPropagation();
+      this.open ? this.close() : this.openBelow(trigger);
+    });
+
+    this.addEventListener('click', (e) => {
+      const item = e.target.closest?.('zhimo-menu-item');
+      if (!item || item.hasAttribute('disabled')) return;
+      this.dispatchEvent(new CustomEvent('select', {
+        detail: { value: item.getAttribute('value') }, bubbles: true, composed: true,
+      }));
+      this.close();
+    });
+  }
+}
+
+class ZhimoMenuItem extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          padding: 7px 12px;
+          font-family: var(--zhimo-font);
+          font-size: 13.5px;
+          color: var(--zhimo-fg);
+          border-radius: var(--zhimo-radius-sm);
+          cursor: pointer;
+          user-select: none;
+          white-space: nowrap;
+          transition: background var(--zhimo-transition);
+        }
+        :host(:hover) { background: var(--zhimo-bg-hover); }
+        :host([danger]) { color: var(--zhimo-danger); }
+        :host([disabled]) { color: var(--zhimo-fg-muted); cursor: not-allowed; }
+        :host([disabled]:hover) { background: none; }
+      </style>
+      <slot></slot>
+    `;
+  }
+
+  connectedCallback() { this.setAttribute('role', 'menuitem'); }
+}
+
+class ZhimoSelect extends ZhimoPopupBase {
+  static observedAttributes = ['label', 'placeholder', 'disabled', 'value'];
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host { display: block; font-family: var(--zhimo-font); }
+        :host([disabled]) { opacity: 0.5; pointer-events: none; }
+        label {
+          display: block;
+          font-family: var(--zhimo-font-serif);
+          font-size: 13px;
+          font-weight: 600;
+          color: var(--zhimo-fg);
+          margin-bottom: 4px;
+        }
+        label:empty { display: none; }
+        /* 与 zhimo-input 同一张稿纸：一条底线 + 朱砂聚焦 */
+        .trigger {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          gap: 8px;
+          width: 100%;
+          box-sizing: border-box;
+          height: 34px;
+          padding: 0 2px;
+          font-family: inherit;
+          font-size: 14px;
+          color: var(--zhimo-fg);
+          background: transparent;
+          border: none;
+          border-bottom: 1px solid var(--zhimo-border-strong);
+          border-radius: 0;
+          cursor: pointer;
+          transition: border-color var(--zhimo-transition), box-shadow var(--zhimo-transition);
+        }
+        .trigger:hover { border-bottom-color: var(--zhimo-fg); }
+        .trigger:focus-visible, :host([open]) .trigger {
+          outline: none;
+          border-bottom-color: var(--zhimo-seal);
+          box-shadow: 0 1px 0 var(--zhimo-seal);
+        }
+        .text.placeholder { color: var(--zhimo-fg-muted); }
+        .chevron {
+          flex: none;
+          font-size: 10px;
+          color: var(--zhimo-fg-muted);
+          transition: transform var(--zhimo-transition);
+        }
+        :host([open]) .chevron { transform: rotate(180deg); }
+        ${PANEL_CSS}
+      </style>
+      <label part="label"></label>
+      <button class="trigger" part="trigger" aria-haspopup="listbox">
+        <span class="text"></span><span class="chevron">▼</span>
+      </button>
+      <div class="panel" part="panel" role="listbox" hidden><slot></slot></div>
+    `;
+    this._panel = this.shadowRoot.querySelector('.panel');
+    this._labelEl = this.shadowRoot.querySelector('label');
+    this._text = this.shadowRoot.querySelector('.text');
+    this._trigger = this.shadowRoot.querySelector('.trigger');
+
+    this._trigger.addEventListener('click', () => {
+      this.open ? this.close() : this.openBelow(this._trigger);
+    });
+    this.shadowRoot.querySelector('.panel slot')
+      .addEventListener('slotchange', () => this._syncText());
+
+    this.addEventListener('click', (e) => {
+      const opt = e.target.closest?.('zhimo-option');
+      if (!opt || opt.hasAttribute('disabled')) return;
+      this._select(opt);
+    });
+  }
+
+  attributeChangedCallback(name, _old, val) {
+    if (name === 'label') this._labelEl.textContent = val ?? '';
+    else this._syncText();
+  }
+
+  /* 键盘：上下移动到相邻可用项并直接选中（与原生 select 行为一致） */
+  _handleKey(e) {
+    if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp') return;
+    e.preventDefault();
+    const opts = this._options().filter((o) => !o.hasAttribute('disabled'));
+    if (!opts.length) return;
+    const cur = opts.findIndex((o) => o.getAttribute('value') === this.getAttribute('value'));
+    const next = opts[Math.max(0, Math.min(opts.length - 1, cur + (e.key === 'ArrowDown' ? 1 : -1)))];
+    this._select(next, { keepOpen: true });
+  }
+
+  _options() { return [...this.querySelectorAll('zhimo-option')]; }
+
+  _select(opt, { keepOpen = false } = {}) {
+    if (!keepOpen) this.close();
+    if (opt.getAttribute('value') === this.getAttribute('value')) return;
+    this.setAttribute('value', opt.getAttribute('value') ?? '');
+    this.dispatchEvent(new CustomEvent('change', {
+      detail: { value: this.getAttribute('value') }, bubbles: true, composed: true,
+    }));
+  }
+
+  _syncText() {
+    const value = this.getAttribute('value');
+    const current = this._options().find((o) => o.getAttribute('value') === value);
+    this._options().forEach((o) => o.toggleAttribute('selected', o === current));
+    this._text.textContent = current?.textContent ?? this.getAttribute('placeholder') ?? '请选择';
+    this._text.classList.toggle('placeholder', !current);
+  }
+
+  get value() { return this.getAttribute('value'); }
+  set value(v) { v == null ? this.removeAttribute('value') : this.setAttribute('value', String(v)); }
+}
+
+class ZhimoOption extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          padding: 7px 12px;
+          font-family: var(--zhimo-font);
+          font-size: 13.5px;
+          color: var(--zhimo-fg);
+          border-radius: var(--zhimo-radius-sm);
+          cursor: pointer;
+          user-select: none;
+          white-space: nowrap;
+          transition: background var(--zhimo-transition);
+        }
+        :host(:hover) { background: var(--zhimo-bg-hover); }
+        :host([disabled]) { color: var(--zhimo-fg-muted); cursor: not-allowed; }
+        :host([disabled]:hover) { background: none; }
+        /* 选中项盖一枚小朱砂印 */
+        .seal {
+          flex: none;
+          width: 6px;
+          height: 6px;
+          border-radius: 1px;
+          background: var(--zhimo-seal);
+          opacity: 0;
+          transition: opacity var(--zhimo-transition);
+        }
+        :host([selected]) { color: var(--zhimo-seal); }
+        :host([selected]) .seal { opacity: 1; }
+      </style>
+      <span class="seal" part="seal"></span><slot></slot>
+    `;
+  }
+
+  connectedCallback() { this.setAttribute('role', 'option'); }
+}
+
+customElements.define('zhimo-dropdown', ZhimoDropdown);
+customElements.define('zhimo-menu-item', ZhimoMenuItem);
+customElements.define('zhimo-select', ZhimoSelect);
+customElements.define('zhimo-option', ZhimoOption);

package/src/nav.js

@@ -0,0 +1,173 @@
+/* ZhiMo UI 导航组件：zhimo-navbar / zhimo-tabs + zhimo-tab / zhimo-breadcrumb */
+
+class ZhimoNavbar extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          position: sticky;
+          top: 0;
+          z-index: 100;
+        }
+        .bar {
+          display: flex;
+          align-items: center;
+          gap: 24px;
+          height: 56px;
+          padding: 0 24px;
+          border-bottom: 1px solid var(--zhimo-border);
+          background: var(--zhimo-surface-bg);
+          backdrop-filter: var(--zhimo-surface-blur);
+          -webkit-backdrop-filter: var(--zhimo-surface-blur);
+          font-family: var(--zhimo-font);
+        }
+        .brand { font-family: var(--zhimo-font-serif); font-size: 16px; font-weight: 700; color: var(--zhimo-fg); }
+        .links { display: flex; align-items: center; gap: 4px; flex: 1; }
+        /* 朱砂下划线从左游走出来 */
+        .links ::slotted(a) {
+          font-size: 14px;
+          color: var(--zhimo-fg-muted);
+          text-decoration: none;
+          padding: 6px 10px;
+          background: linear-gradient(var(--zhimo-seal), var(--zhimo-seal)) no-repeat;
+          background-size: 0% 1px;
+          background-position: 10px calc(100% - 2px);
+          transition: color var(--zhimo-transition), background-size var(--zhimo-transition);
+        }
+        .links ::slotted(a:hover) { color: var(--zhimo-fg); background-size: calc(100% - 20px) 1px; }
+        .actions { display: flex; align-items: center; gap: 8px; }
+      </style>
+      <div class="bar" part="bar">
+        <span class="brand" part="brand"><slot name="brand"></slot></span>
+        <nav class="links" part="links"><slot></slot></nav>
+        <div class="actions" part="actions"><slot name="actions"></slot></div>
+      </div>
+    `;
+  }
+}
+
+class ZhimoTabs extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host { display: block; font-family: var(--zhimo-font); }
+        nav {
+          display: flex;
+          gap: 4px;
+          border-bottom: 1px solid var(--zhimo-border);
+        }
+        button {
+          font-family: var(--zhimo-font);
+          font-size: 14px;
+          font-weight: 500;
+          background: none;
+          border: none;
+          border-bottom: 2px solid transparent;
+          margin-bottom: -1px;
+          padding: 10px 14px;
+          color: var(--zhimo-fg-muted);
+          cursor: pointer;
+          transition: color var(--zhimo-transition);
+        }
+        button:hover { color: var(--zhimo-fg); }
+        button.active { color: var(--zhimo-fg); border-bottom-color: var(--zhimo-seal); }
+        button:focus-visible {
+          outline: none;
+          box-shadow: var(--zhimo-focus-ring);
+          border-radius: var(--zhimo-radius-sm);
+        }
+      </style>
+      <nav part="list" role="tablist"></nav>
+      <div part="panels"><slot></slot></div>
+    `;
+    this._nav = this.shadowRoot.querySelector('nav');
+    this._index = 0;
+    this.shadowRoot.querySelector('slot').addEventListener('slotchange', () => this._build());
+  }
+
+  _build() {
+    this._tabs = [...this.children].filter((el) => el.tagName === 'ZHIMO-TAB');
+    this._nav.innerHTML = '';
+    this._tabs.forEach((tab, i) => {
+      const btn = document.createElement('button');
+      btn.setAttribute('role', 'tab');
+      btn.textContent = tab.getAttribute('label') ?? `标签 ${i + 1}`;
+      btn.addEventListener('click', () => this.select(i));
+      this._nav.appendChild(btn);
+    });
+    this.select(Math.min(this._index, this._tabs.length - 1), { silent: true });
+  }
+
+  select(index, { silent = false } = {}) {
+    if (!this._tabs?.length || index < 0) return;
+    this._index = index;
+    this._tabs.forEach((tab, i) => { tab.hidden = i !== index; });
+    [...this._nav.children].forEach((btn, i) => {
+      btn.classList.toggle('active', i === index);
+      btn.setAttribute('aria-selected', String(i === index));
+    });
+    if (!silent) {
+      this.dispatchEvent(new CustomEvent('change', {
+        detail: { index, label: this._tabs[index].getAttribute('label') },
+        bubbles: true, composed: true,
+      }));
+    }
+  }
+}
+
+class ZhimoTab extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          padding: 16px 2px;
+          font-size: 14px;
+          line-height: 1.6;
+          color: var(--zhimo-fg);
+        }
+        :host([hidden]) { display: none; }
+      </style>
+      <slot></slot>
+    `;
+  }
+}
+
+class ZhimoBreadcrumb extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host { display: block; font-family: var(--zhimo-font); font-size: 14px; }
+        nav { display: flex; align-items: center; flex-wrap: wrap; }
+        ::slotted(*) {
+          color: var(--zhimo-fg-muted);
+          text-decoration: none;
+          transition: color var(--zhimo-transition);
+        }
+        ::slotted(a:hover) { color: var(--zhimo-fg); }
+        ::slotted(*:last-child) { color: var(--zhimo-fg); font-weight: 500; }
+        ::slotted(*:not(:first-child))::before {
+          content: '·';
+          margin: 0 10px;
+          color: var(--zhimo-seal);
+          font-weight: 700;
+        }
+      </style>
+      <nav part="nav" aria-label="面包屑"><slot></slot></nav>
+    `;
+  }
+}
+
+customElements.define('zhimo-navbar', ZhimoNavbar);
+customElements.define('zhimo-tabs', ZhimoTabs);
+customElements.define('zhimo-tab', ZhimoTab);
+customElements.define('zhimo-breadcrumb', ZhimoBreadcrumb);

package/src/tokens.css

@@ -0,0 +1,88 @@
+/* ============================================
+   ZhiMo UI 设计令牌 —— 纸张与油墨（编辑部风）
+   米白纸底、墨黑文字、衬线标题，
+   朱砂印章红是全局唯一的强调色。
+   修改这一个文件即可全局换肤。
+   ============================================ */
+
+:root {
+  --zhimo-font: "Songti SC", "Noto Serif SC", "Noto Serif CJK SC",
+    "Source Han Serif SC", "SimSun", Georgia, "Times New Roman", serif;
+  --zhimo-font-serif: "Songti SC", "Noto Serif SC", "Noto Serif CJK SC",
+    "Source Han Serif SC", "SimSun", Georgia, "Times New Roman", serif;
+
+  /* 纸与墨 */
+  --zhimo-bg: #faf7f0;
+  --zhimo-bg-subtle: #f3eee1;
+  --zhimo-bg-hover: #eee8d8;
+  --zhimo-fg: #1a1714;
+  --zhimo-fg-muted: #7a7265;
+  --zhimo-border: #e0d9c8;
+  --zhimo-border-strong: #c6bca6;
+
+  /* 墨色：实心按钮等主操作 */
+  --zhimo-accent: #1a1714;
+  --zhimo-accent-hover: #3a342c;
+  --zhimo-accent-fg: #faf7f0;
+
+  /* 朱砂印章红：全局唯一强调色 */
+  --zhimo-seal: #b8432f;
+  --zhimo-seal-hover: #a03a28;
+
+  --zhimo-danger: #9e2f1c;
+  --zhimo-success: #4a6741;
+  --zhimo-warning: #b07d2e;
+
+  /* 形状与阴影：印刷品棱角分明，几乎不用阴影 */
+  --zhimo-radius: 4px;
+  --zhimo-radius-sm: 2px;
+  --zhimo-radius-full: 9999px;
+  --zhimo-shadow-sm: 0 1px 2px rgba(26, 23, 20, 0.06);
+  --zhimo-shadow-md: 0 2px 10px rgba(26, 23, 20, 0.1);
+  --zhimo-shadow-lg: 0 12px 40px rgba(26, 23, 20, 0.18);
+  --zhimo-focus-ring: 0 0 0 3px rgba(184, 67, 47, 0.22);
+
+  /* 遮罩：墨色薄雾 + 毛玻璃，给浮层一层高级的纸面景深 */
+  --zhimo-overlay-bg: rgba(26, 23, 20, 0.32);
+  --zhimo-overlay-blur: blur(8px) saturate(1.2);
+
+  /* 浮层磨砂纸面：所有遮挡水墨背景的面板共用，让墨色透出又不伤可读性 */
+  --zhimo-surface-bg: color-mix(in srgb, var(--zhimo-bg) 82%, transparent);
+  --zhimo-surface-blur: blur(12px) saturate(1.15);
+
+  /* 动效 */
+  --zhimo-transition: 180ms ease;
+}
+
+/* 夜读模式：深茶色纸，不是冷冰冰的纯黑 */
+[data-theme="dark"] {
+  --zhimo-bg: #16140f;
+  --zhimo-bg-subtle: #1d1a14;
+  --zhimo-bg-hover: #282318;
+  --zhimo-fg: #e8e2d4;
+  --zhimo-fg-muted: #968d7c;
+  --zhimo-border: #353023;
+  --zhimo-border-strong: #4d4634;
+
+  --zhimo-accent: #e8e2d4;
+  --zhimo-accent-hover: #d6cfbf;
+  --zhimo-accent-fg: #16140f;
+
+  --zhimo-seal: #d96a52;
+  --zhimo-seal-hover: #e07e68;
+
+  --zhimo-danger: #d96a52;
+  --zhimo-success: #7d9a72;
+  --zhimo-warning: #cfa050;
+
+  --zhimo-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
+  --zhimo-shadow-md: 0 2px 10px rgba(0, 0, 0, 0.5);
+  --zhimo-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.6);
+  --zhimo-focus-ring: 0 0 0 3px rgba(217, 106, 82, 0.28);
+
+  --zhimo-overlay-bg: rgba(0, 0, 0, 0.5);
+  --zhimo-overlay-blur: blur(8px) saturate(1.2);
+
+  --zhimo-surface-bg: color-mix(in srgb, var(--zhimo-bg) 80%, transparent);
+  --zhimo-surface-blur: blur(12px) saturate(1.15);
+}