/* 大学物理实验数据处理参考平台 — 共享主题与布局 */

/* ============================================================
   风格: 简约实验工作台，暖灰底色，低饱和绿色点缀
   设备: desktop / tablet / mobile
   ============================================================ */

/* ---------- 品牌色（低饱和深绿，仅作交互点缀） ---------- */
:root {
  --brand-50:  #f2f7f5;
  --brand-100: #e3eeea;
  --brand-200: #c7ddd5;
  --brand-300: #9fc5b7;
  --brand-400: #70a594;
  --brand-500: #4a8372;
  --brand-600: #2f6f5e;
  --brand-700: #285d50;
  --brand-800: #224c42;
  --brand-900: #1d4038;
  --brand-950: #102720;
}

/* ---------- 中性色 ---------- */
:root {
  --neutral-0:   #ffffff;
  --neutral-50:  #f7f7f5;
  --neutral-100: #f0f0ed;
  --neutral-200: #e5e5e1;
  --neutral-300: #d3d3ce;
  --neutral-400: #a8a8a2;
  --neutral-500: #7b7b75;
  --neutral-600: #62625d;
  --neutral-700: #494945;
  --neutral-800: #30302d;
  --neutral-900: #20201e;
  --neutral-950: #141413;
}

/* ---------- 状态色 ---------- */
:root {
  --state-success: #16a34a;
  --state-warning: #d97706;
  --state-error:   #dc2626;
  --state-info:    #2563eb;
}

/* ---------- 语义别名（apply-html-head-contract.mjs 必需） ---------- */
:root {
  --background: var(--neutral-50);
  --foreground: var(--neutral-900);
  --card: var(--neutral-0);
  --card-foreground: var(--neutral-900);
  --popover: var(--neutral-0);
  --popover-foreground: var(--neutral-900);
  --primary: var(--brand-600);
  --primary-foreground: var(--neutral-0);
  --muted: var(--neutral-100);
  --muted-foreground: var(--neutral-600);
  --border: var(--neutral-200);
  --input: var(--neutral-200);
  --ring: var(--brand-600);
}

/* ---------- 圆角 ---------- */
:root {
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-full: 9999px;
}

/* ---------- 阴影（仅浮层使用） ---------- */
:root {
  --shadow-sm: 0 1px 2px rgba(20, 20, 19, 0.035);
  --shadow-md: 0 8px 24px rgba(20, 20, 19, 0.07);
  --shadow-lg: 0 18px 48px rgba(20, 20, 19, 0.11);
}

/* ---------- 字体 ---------- */
:root {
  --font-sans: Inter, "SF Pro Text", "Segoe UI", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, -apple-system, sans-serif;
  --font-mono: "Cascadia Code", "Fira Code", "Consolas", "Courier New", monospace;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-tight: 1.25;
  --line-height-normal: 1.6;
  --line-height-relaxed: 1.75;
}

/* ---------- 间距 ---------- */
:root {
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-5: 1.25rem;
  --spacing-6: 1.5rem;
  --spacing-8: 2rem;
  --spacing-10: 2.5rem;
  --spacing-12: 3rem;
  --spacing-16: 4rem;
}

/* ---------- 基础排版 ---------- */
body {
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--foreground);
  background: var(--background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
}

*, *::before, *::after { box-sizing: border-box; }
button, input, select, textarea { font: inherit; }

h1 { font-size: var(--font-size-4xl); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); }
h2 { font-size: var(--font-size-3xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); }
h3 { font-size: var(--font-size-2xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); }
h4 { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); }
h5 { font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); line-height: var(--line-height-tight); }
h6 { font-size: var(--font-size-base); font-weight: var(--font-weight-medium); line-height: var(--line-height-tight); }

/* ============================================================
   semantic-token-fallback — 语义工具类（Tailwind 兜底）
   ============================================================ */
.bg-background { background-color: var(--background); }
.text-background { color: var(--background); }
.border-background { border-color: var(--background); }
.ring-background { --tw-ring-color: var(--background); }
.bg-foreground { background-color: var(--foreground); }
.text-foreground { color: var(--foreground); }
.border-foreground { border-color: var(--foreground); }
.ring-foreground { --tw-ring-color: var(--foreground); }
.bg-card { background-color: var(--card); }
.text-card { color: var(--card); }
.border-card { border-color: var(--card); }
.ring-card { --tw-ring-color: var(--card); }
.bg-card-foreground { background-color: var(--card-foreground); }
.text-card-foreground { color: var(--card-foreground); }
.border-card-foreground { border-color: var(--card-foreground); }
.ring-card-foreground { --tw-ring-color: var(--card-foreground); }
.bg-popover { background-color: var(--popover); }
.text-popover { color: var(--popover); }
.border-popover { border-color: var(--popover); }
.ring-popover { --tw-ring-color: var(--popover); }
.bg-popover-foreground { background-color: var(--popover-foreground); }
.text-popover-foreground { color: var(--popover-foreground); }
.border-popover-foreground { border-color: var(--popover-foreground); }
.ring-popover-foreground { --tw-ring-color: var(--popover-foreground); }
.bg-primary { background-color: var(--primary); }
.text-primary { color: var(--primary); }
.border-primary { border-color: var(--primary); }
.ring-primary { --tw-ring-color: var(--primary); }
.bg-primary-foreground { background-color: var(--primary-foreground); }
.text-primary-foreground { color: var(--primary-foreground); }
.border-primary-foreground { border-color: var(--primary-foreground); }
.ring-primary-foreground { --tw-ring-color: var(--primary-foreground); }
.bg-muted { background-color: var(--muted); }
.text-muted { color: var(--muted); }
.border-muted { border-color: var(--muted); }
.ring-muted { --tw-ring-color: var(--muted); }
.bg-muted-foreground { background-color: var(--muted-foreground); }
.text-muted-foreground { color: var(--muted-foreground); }
.border-muted-foreground { border-color: var(--muted-foreground); }
.ring-muted-foreground { --tw-ring-color: var(--muted-foreground); }
.bg-border { background-color: var(--border); }
.text-border { color: var(--border); }
.border-border { border-color: var(--border); }
.ring-border { --tw-ring-color: var(--border); }
.bg-input { background-color: var(--input); }
.text-input { color: var(--input); }
.border-input { border-color: var(--input); }
.ring-input { --tw-ring-color: var(--input); }
.bg-ring { background-color: var(--ring); }
.text-ring { color: var(--ring); }
.border-ring { border-color: var(--ring); }
.ring-ring { --tw-ring-color: var(--ring); }

/* ============================================================
   共享 Shell / 侧边栏布局（.shell-* 规则，全站通用）
   ============================================================ */
.shell-sidebar {
  width: 224px;
  min-height: 100vh;
  background-color: #fbfbfa;
  color: var(--neutral-900);
  position: fixed;
  left: 0;
  top: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--neutral-200);
}
.shell-sidebar-brand {
  padding: 26px 20px 22px;
  border-bottom: 1px solid var(--neutral-200);
}
.shell-sidebar-brand h1 {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--neutral-950);
}
.shell-sidebar-brand p {
  font-size: 12px;
  color: var(--neutral-500);
  margin: 6px 0 0;
}
.shell-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 2px 10px;
  padding: 10px 12px;
  font-size: 14px;
  color: var(--neutral-600);
  transition: all 0.15s ease;
  cursor: pointer;
  text-decoration: none;
  border-radius: 9px;
  border: 1px solid transparent;
}
.shell-nav-item:hover {
  background-color: var(--neutral-100);
  color: var(--neutral-900);
}
.shell-nav-item.active {
  background-color: #e9e9e5;
  color: var(--neutral-950);
  font-weight: 500;
  border-color: #dfdfda;
}
.shell-nav-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.shell-nav-icon svg {
  width: 18px;
  height: 18px;
}
.shell-nav-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.shell-sidebar-footnote {
  margin: 0;
  color: var(--neutral-400);
  font-size: 11px;
  line-height: 1.5;
}
.shell-sidebar > .px-5 {
  border-color: var(--neutral-200) !important;
}
.shell-reference-notice {
  margin-left: 224px;
  background: #fbfbfa;
  border-bottom: 1px solid var(--neutral-200);
}
.shell-reference-notice-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 11px 36px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--neutral-600);
  font-size: 12px;
  line-height: 1.6;
}
.shell-reference-notice strong {
  flex: 0 0 auto;
  color: var(--neutral-800);
  font-weight: 600;
}
.shell-main {
  margin-left: 224px;
  min-height: 100vh;
  background-color: var(--neutral-50);
}
.shell-page-header {
  max-width: 1180px;
  margin: 0 auto;
  padding: 36px 36px 0;
}
.shell-page-title {
  font-size: 26px;
  font-weight: 600;
  color: var(--neutral-900);
  line-height: 1.25;
  letter-spacing: -0.025em;
}
.shell-page-subtitle {
  font-size: 14px;
  color: var(--neutral-500);
  margin-top: 4px;
}
.shell-page-content {
  padding: 26px 36px 64px;
  max-width: 1180px;
  margin: 0 auto;
}

@media (max-width: 900px) {
  .shell-sidebar {
    position: sticky;
    width: 100%;
    min-height: auto;
    top: 0;
    flex-direction: row;
    align-items: center;
    overflow: hidden;
  }
  .shell-sidebar-brand {
    flex: 0 0 180px;
    padding: 12px 16px;
    border-bottom: 0;
    border-right: 1px solid var(--neutral-200);
  }
  .shell-sidebar-brand h1 { font-size: 14px; line-height: 1.2; }
  .shell-sidebar-brand p { display: none; }
  .shell-sidebar > .flex {
    flex-direction: row;
    overflow-x: auto;
    padding: 6px !important;
  }
  .shell-nav-item { flex: 0 0 auto; margin: 0 2px; padding: 8px 10px; }
  .shell-sidebar > .px-5 { display: none; }
  .shell-reference-notice,
  .shell-main { margin-left: 0; }
  .shell-reference-notice-inner { padding: 10px 20px; }
  .shell-page-header { padding: 28px 22px 0; }
  .shell-page-content { padding: 22px 22px 48px; }
}

@media (max-width: 640px) {
  .shell-sidebar-brand { flex-basis: 126px; }
  .shell-sidebar-brand h1 br { display: none; }
  .shell-nav-icon { display: none; }
  .shell-reference-notice-inner { display: block; padding: 9px 16px; }
  .shell-reference-notice strong { display: block; margin-bottom: 2px; }
  .shell-page-header { padding: 24px 16px 0; }
  .shell-page-content { padding: 18px 16px 40px; }
  .shell-page-title { font-size: 23px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}