/* ==========================================================================
   base.css — 设计令牌 / 重置 / 基础排版 / 无障碍
   物理科普学习站「Physics Edu」：深蓝青蓝科技感，深浅双主题
   ========================================================================== */

/* ---------- 设计令牌（浅色主题默认） ---------- */
:root {
  /* 品牌主色：深蓝 → 青蓝 */
  --brand-900: #0b1220;
  --brand-800: #101a30;
  --brand-700: #16233f;
  --brand-600: #1d3054;
  --brand-500: #2a457a;
  --brand-400: #3b63a8;
  --brand-300: #5b8ad0;
  --brand-200: #8fb0e3;
  --brand-100: #c5d6f1;
  --brand-050: #e8effb;

  /* 模块强调色：力-橙 / 电-黄 / 热-红 / 光-紫 / 原子-青 */
  --cat-li: #f59e0b;      /* 力 · 橙 */
  --cat-dian: #eab308;    /* 电 · 黄 */
  --cat-re: #ef4444;      /* 热 · 红 */
  --cat-guang: #a855f7;   /* 光 · 紫 */
  --cat-yuanzi: #06b6d4;  /* 原子 · 青 */

  /* 文本与表面（浅色主题） */
  --bg: #f2f5fb;
  --bg-soft: #e6edf7;
  --surface: #ffffff;
  --surface-2: #f7f9fd;
  --surface-3: #eef2f9;
  --text: #16223a;
  --text-2: #46567a;
  --text-3: #7384a6;
  --border: #d7e0ef;
  --border-strong: #b9c8e2;

  /* 语义色 */
  --ok: #16a34a;
  --warn: #d97706;
  --danger: #dc2626;
  --info: #2563eb;

  /* 玻璃 / 辉光 */
  --glow: rgba(37, 99, 235, 0.16);
  --shadow-sm: 0 1px 3px rgba(13, 27, 54, 0.08);
  --shadow-md: 0 6px 18px rgba(13, 27, 54, 0.10);
  --shadow-lg: 0 16px 40px rgba(13, 27, 54, 0.16);

  /* 排版 */
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
             "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --font-mono: "JetBrains Mono", "Cascadia Code", Consolas, "Courier New", monospace;
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;
  --fs-3xl: 2.25rem;
  --fs-4xl: 3rem;
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* 动效 */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --speed-fast: 0.15s;
  --speed: 0.28s;

  /* 布局 */
  --header-h: 64px;
  --container: 1180px;
}

/* ---------- 深色主题令牌 ---------- */
[data-theme="dark"] {
  --bg: #0b1220;
  --bg-soft: #0e1626;
  --surface: #111c30;
  --surface-2: #16233d;
  --surface-3: #1b2a48;
  --text: #e6edf9;
  --text-2: #a9badd;
  --text-3: #7d90b6;
  --border: #22345a;
  --border-strong: #33507f;
  --glow: rgba(59, 130, 246, 0.20);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.40);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55);
  color-scheme: dark;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--fs-md);
  line-height: 1.65;
  color: var(--text);
  background:
    radial-gradient(1100px 480px at 12% -8%, var(--glow), transparent 60%),
    radial-gradient(900px 420px at 95% 4%, rgba(6, 182, 212, 0.08), transparent 55%),
    var(--bg);
  transition: background-color var(--speed), color var(--speed);
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 0.5em;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.01em;
}

p { margin: 0 0 1em; }

a {
  color: var(--brand-300);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

img, svg, video { max-width: 100%; display: block; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

ul, ol { padding-left: 1.4em; }

/* ---------- 无障碍：键盘焦点可见 ---------- */
:focus-visible {
  outline: 3px solid var(--brand-300);
  outline-offset: 2px;
  border-radius: 4px;
}

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

/* ---------- 通用工具类 ---------- */
.container {
  width: min(var(--container), 100% - 2rem);
  margin-inline: auto;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.mono { font-family: var(--font-mono); }

.visually-hidden { display: none !important; }