/* ============================================================
   独立子站页共用样式表
   适用：不加载主站 bundle 的独立页面（/learn/、/demo/ 等）
   设计令牌与主站 css/variables.css 同源：极简灰 + 暖白 stone
   主站改 token 时这份要同步
   ============================================================ */

/* ---------- 设计令牌 ---------- */
:root {
  --sa-bg: #FFFFFF;
  --sa-bg-soft: #FAFAF9;
  --sa-bg-tertiary: #F5F5F4;
  --sa-text: #0F172A;
  --sa-text-secondary: #44403C;
  --sa-text-tertiary: #78716C;
  --sa-border: #E7E5E4;
  --sa-border-strong: #D6D3D1;
  --sa-primary: #0F172A;
  --sa-primary-hover: #020617;
  --sa-primary-soft: #F1F5F9;
  --sa-success: #16A34A;
  --sa-warning: #D97706;
  --sa-danger: #DC2626;

  --sa-radius-sm: 4px;
  --sa-radius-md: 6px;
  --sa-radius-lg: 10px;
  --sa-radius-xl: 16px;

  --sa-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --sa-shadow-md: 0 2px 4px rgba(15, 23, 42, 0.05), 0 1px 2px rgba(15, 23, 42, 0.04);
  --sa-shadow-lg: 0 4px 12px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04);
  --sa-shadow-xl: 0 8px 24px rgba(15, 23, 42, 0.08), 0 4px 8px rgba(15, 23, 42, 0.05);

  --sa-font: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, "Noto Sans SC", "Noto Sans JP", "PingFang SC", "Hiragino Sans", "Microsoft YaHei", sans-serif;
  --sa-font-mono: "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", ui-monospace, Menlo, monospace;

  --sa-t: 0.15s ease;
  --sa-topbar-h: 60px;
  --sa-page-max: 1080px;
}

[data-theme="dark"] {
  --sa-bg: #0C0A09;
  --sa-bg-soft: #1C1917;
  --sa-bg-tertiary: #292524;
  --sa-text: #FAFAF9;
  --sa-text-secondary: #D6D3D1;
  --sa-text-tertiary: #A8A29E;
  --sa-border: #292524;
  --sa-border-strong: #44403C;
  --sa-primary: #FAFAF9;
  --sa-primary-hover: #FFFFFF;
  --sa-primary-soft: rgba(250, 250, 249, 0.1);
  --sa-success: #4ADE80;
  --sa-warning: #FBBF24;
  --sa-danger: #F87171;

  --sa-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
  --sa-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.3);
  --sa-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.35), 0 4px 6px -4px rgba(0, 0, 0, 0.2);
  --sa-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.3);
}

/* ---------- 基础 ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--sa-font);
  background: var(--sa-bg);
  color: var(--sa-text);
  letter-spacing: -0.005em;
  font-feature-settings: "ss01", "cv01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--sa-primary); }

/* ---------- 顶栏 ---------- */
.sa-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--sa-border);
}

[data-theme="dark"] .sa-topbar { background: rgba(12, 10, 9, 0.85); }

.sa-topbar-inner {
  /* 顶栏内容与页面主体左右对齐：主体宽度 + 两侧内边距 */
  max-width: calc(var(--sa-page-max) + 40px);
  margin: 0 auto;
  height: var(--sa-topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 20px;
}

.sa-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--sa-text);
  text-decoration: none;
  white-space: nowrap;
}

.sa-brand img {
  width: 22px;
  height: 22px;
  border-radius: var(--sa-radius-sm);
  display: block;
}

/* logo 是黑色单色图形，暗色下反色才看得见 */
[data-theme="dark"] .sa-brand img { filter: invert(1); }

.sa-actions { display: flex; align-items: center; gap: 6px; }

/* ---------- 按钮：与主站 .nav-btn 同款观感 ---------- */
.sa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 36px;
  height: 36px;
  padding: 0 12px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--sa-text-secondary);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--sa-radius-md);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--sa-t), color var(--sa-t), border-color var(--sa-t);
}

.sa-btn:hover { background: var(--sa-bg-tertiary); color: var(--sa-text); }
.sa-btn svg { display: block; flex-shrink: 0; }
.sa-btn-icon { padding: 0; }

.sa-btn-solid {
  background: var(--sa-primary);
  color: var(--sa-bg);
  border-color: var(--sa-primary);
  font-weight: 600;
}

.sa-btn-solid:hover {
  background: var(--sa-primary-hover);
  border-color: var(--sa-primary-hover);
  color: var(--sa-bg);
}

.sa-btn-outline { border-color: var(--sa-border); }
.sa-btn-outline:hover { border-color: var(--sa-border-strong); background: var(--sa-bg-soft); }

/* ---------- 通用小件 ---------- */
.sa-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--sa-text-secondary);
  background: var(--sa-bg-tertiary);
  border-radius: var(--sa-radius-sm);
}

.sa-hint { font-size: 12px; color: var(--sa-text-tertiary); }

@media (max-width: 600px) {
  .sa-topbar-inner { height: 54px; padding: 0 14px; }
  .sa-brand { font-size: 14px; }
}