/* Context redesign · 共享设计变量
   方向：ego.ist 式的米白底、紧凑粗体大标题、可触感的软胶囊；
   内容色块（紫 / 鼠尾草绿 / 奶油 / 钴蓝）只用于承载具体内容。 */
@import url("../assets/phosphor/regular.css");

:root {
  --canvas: #f4f4f1;
  --canvas-2: #ecece8;
  --surface: #ffffff;
  --surface-2: #fafaf8;
  --ink: #131313;
  --ink-2: #3b3b3d;
  --mute: #86868b;
  --mute-2: #b3b3b7;
  --line: rgba(19, 19, 19, 0.07);
  --line-2: rgba(19, 19, 19, 0.12);

  --violet: #8a74c9;
  --violet-deep: #5f4a9e;
  --violet-soft: #efecf6;
  --pink: #d9a5bd;
  --cobalt: #4f6fa8;
  --sky: #8ea9d6;
  --sky-soft: #e9eef6;
  --sage: #6f8a69;
  --sage-soft: #e8ece3;
  --cream: #f7f1e6;
  --terracotta: #b8684f;
  --amber: #cf9a45;
  --green: #30b85b;
  --red: #e5483d;

  --r-xl: 30px;
  --r-l: 22px;
  --r-m: 16px;
  --r-s: 11px;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Helvetica Neue", sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", sans-serif;
  --mono: "SF Mono", ui-monospace, Menlo, monospace;

  /* 阴影只给真正悬浮的东西（标签栏、浮层、弹窗）；卡片和胶囊用细线，不浮起 */
  --pill-shadow: none;
  --lift-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  --glass-bg: rgba(250, 250, 248, 0.62);
  --glass-border: rgba(255, 255, 255, 0.75);
  --glass-shadow: 0 0.5px 0 rgba(255, 255, 255, 0.9) inset, 0 0 0 0.5px rgba(0, 0, 0, 0.06), 0 6px 18px -8px rgba(0, 0, 0, 0.14);
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--font);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; }
img { display: block; }
.mono { font-family: var(--mono); letter-spacing: 0; }
.ph { line-height: 1; }

/* 液态玻璃：用于悬浮导航、浮动按钮与分段控件 */
.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  border: 0.5px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}

/* ego.ist 式的浮雕字胶囊 */
.emboss {
  display: inline-flex;
  align-items: center;
  padding: 0 0.32em;
  border-radius: 0.34em;
  background: #fff;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.08);
  color: transparent;
  background-clip: padding-box;
  position: relative;
}
.emboss > span {
  background: none;
  color: #a3a3a8;
}