/* ==========================================================================
   StudyOps — base.css
   主题变量、基础样式、全局动画（自原 styles.css 拆出）
   ========================================================================== */
/* ==========================================================================
   StudyOps Workspace — 手写样式（零框架）
   双主题通过 html[data-theme] 上的 CSS 变量切换
   ========================================================================== */

/* ---------- Theme Tokens ---------- */
:root,
html[data-theme="light"] {
  --bg: #f8f7f4;
  --text: #191919;
  --shell-bg: #fcfbf8;
  --shell-border: #e5e2dc;
  --rail-bg: #f5f3ee;
  --rail-border: #e8e5df;
  --card-bg: #ffffff;
  --card-border: #eae6e1;
  --border: #e8e4de;
  --sub: #77746f;
  --hover: #f0ede6;
  --nav-active-bg: #e7e3dc;
  --nav-active-text: #000000;
  --nav-active-border: #d8d3c9;
}

html[data-theme="dark"] {
  --bg: #161a22;
  --text: #e7e9ee;
  --shell-bg: #1d222c;
  --shell-border: #303747;
  --rail-bg: #20252f;
  --rail-border: #303747;
  --card-bg: #242834;
  --card-border: #343b4b;
  --border: #343b4b;
  --sub: #959cb0;
  --hover: #2b3140;
  --nav-active-bg: #2f3646;
  --nav-active-text: #ffffff;
  --nav-active-border: #434c61;
}

/* Semantic palette (固定，不随主题变化，与原型一致) */
:root {
  --accent: #5B9FD3;
  --accent-orange: #E69B6B;
  --blue-500: #3b82f6;
  --red-500: #ef4444;
  --amber-400: #fbbf24;
  --amber-500: #f59e0b;
  --amber-600: #d97706;
  --emerald-500: #10b981;
  --emerald-600: #059669;
  --emerald-700: #047857;
  --indigo-600: #4f46e5;
  --soft-panel: rgba(0, 0, 0, 0.05);
  --gray-10: rgba(107, 114, 128, 0.1);
  --gray-20: rgba(107, 114, 128, 0.2);
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }

html { height: 100%; height: 100dvh; overflow: hidden; }

body {
  margin: 0;
  height: 100%;
  height: 100dvh;
  overflow: hidden;
  background-color: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  user-select: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.mono,
.rail-nav-item, .rail-toggle,
.ctl-btn, .breadcrumb, .status-line, .status-sub, .gh-count,
.hero-scroll-label,
.card-eyebrow, .num, .tag-chip, .btn-tab, .btn-pill, .btn-mini,
.modal-head h3, .modal-label, .btn-modal-cancel, .btn-modal-submit,
.log-time, .task-cat, .badge, .simplex-table, .math-steps,
.term-search, .ded-pts, .hero-nav-right {
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
    "Liberation Mono", monospace;
}

.serif,
.hero-title, .main-title, .card-title, .view-title, .term-name, .tl-title {
  font-family: Georgia, "Times New Roman", "Songti SC", "STSong", "SimSun", serif;
}

.num, .log-time, .score-num, .ded-pts {
  font-variant-numeric: tabular-nums;
}

img { display: block; }

button {
  font-family: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

/* 可点击区域不小于 40×40 */
button, [role="button"] { min-height: 40px; min-width: 40px; }
button:active { transform: scale(0.96); }

.icon { width: 16px; height: 16px; flex-shrink: 0; }
.icon-sm { width: 14px; height: 14px; }
.icon-xs { width: 12px; height: 12px; }

.sub { color: var(--sub); }
.accent { color: var(--accent); }

/* ---------- Animations ---------- */
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
@keyframes ping {
  0% { transform: scale(1); opacity: 1; }
  75%, 100% { transform: scale(2); opacity: 0; }
}
@keyframes bounce {
  0%, 100% { transform: translateY(-15%); }
  50% { transform: translateY(15%); }
}
@keyframes spin { to { transform: rotate(360deg); } }

.pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.bounce { animation: bounce 1s infinite; }
.spinning { animation: spin 0.6s linear; color: var(--accent); }


/* 直达时禁用转场动画 */
html.no-anim *,
html.no-anim *::before,
html.no-anim *::after { transition: none !important; animation: none !important; }


/* ==========================================================================
   PWA / iOS Safari 适配（安全区与触屏）
   贴边的 fixed 元素补内边距在 styles/mobile.css（需晚于 components.css 加载）
   ========================================================================== */

/* ---------- 安全区变量（iOS 刘海 / Home 横条 / 横屏侧边） ---------- */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

/* 禁 iOS 页面级下拉回弹与双击放大；内部容器滚动（.main / 抽屉）不受影响。
   刻意不给 body 加 overflow: hidden —— 现有布局依赖页面滚动。 */
html, body {
  overscroll-behavior-y: none;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

/* 触屏设备（含 iOS Safari）把点击热区抬到 44×44：仅覆盖 pointer: coarse，
   桌面仍走上面 40×40 的默认值，避免打乱密集工具条排布 */
@media (pointer: coarse) {
  button, [role="button"] { min-height: 44px; min-width: 44px; }
}