/* ===========================================================
   软之星 AI 编程网课 · base.css
   设计令牌 + 重置 + 排版规范（天蓝白为主，红色点缀）
   字号规范：正文 >=20px，章节大标题 44-64px（录制友好）
   =========================================================== */

:root{
  /* —— 色彩：天蓝白 —— */
  --bg:            #FFFFFF;
  --bg-soft:       #F2F8FF;
  --surface:       #FFFFFF;
  --surface-2:     #F6FAFF;
  --surface-3:     #EAF3FF;
  --ink:           #0F172A;
  --ink-2:         #334155;
  --muted:         #64748B;
  --line:          #E2E8F0;
  --line-strong:   #CBD5E1;

  --brand:         #0EA5E9;
  --brand-600:     #0284C7;
  --brand-700:     #0369A1;
  --brand-soft:    #E0F2FE;
  --brand-ink:     #075985;

  /* —— 点缀：红（只用于强调/警示） —— */
  --accent:        #DC2626;
  --accent-soft:   #FEE2E2;

  --ok:            #10B981;
  --warn:          #F59E0B;

  /* —— 圆角 —— */
  --r-sm: 10px;
  --r:    14px;
  --r-lg: 22px;
  --r-full: 999px;

  /* —— 间距 —— */
  --s1: 6px; --s2: 10px; --s3: 16px; --s4: 22px; --s5: 32px; --s6: 48px; --s7: 72px;

  /* —— 字号（基准 16px，不出现小字） —— */
  --fs-sm:   14px;
  --fs-body: 16px;
  --fs-lg:   18px;
  --fs-h4:   20px;
  --fs-h3:   24px;
  --fs-h2:   30px;
  --fs-h1:   38px;
  --fs-hero: 52px;

  /* —— 字体 —— */
  --font: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-code: "JetBrains Mono", ui-monospace, "SF Mono", Consolas, "Courier New", monospace;

  /* —— 阴影 —— */
  --sh-1: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.05);
  --sh-2: 0 6px 20px rgba(15,23,42,.08);
  --sh-3: 0 18px 50px rgba(2,132,199,.16);

  --sidebar-w: 260px;
}

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

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

body{
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img{ max-width: 100%; display: block; }
a{ color: var(--brand-600); text-decoration: none; }
a:hover{ color: var(--brand-700); }
button{ font: inherit; color: inherit; cursor: pointer; }
ul,ol{ margin: 0; padding: 0; }

h1,h2,h3,h4{ margin: 0; line-height: 1.25; font-weight: 800; letter-spacing: .01em; }
h1{ font-size: var(--fs-h1); }
h2{ font-size: var(--fs-h2); }
h3{ font-size: var(--fs-h3); }
h4{ font-size: var(--fs-h4); }
p{ margin: 0 0 var(--s3); }

code,kbd{ font-family: var(--font-code); }
code{
  font-size: .92em;
  background: var(--brand-soft);
  color: var(--brand-ink);
  padding: .12em .42em;
  border-radius: 6px;
  border: 1px solid #CDE9FB;
}
kbd{
  font-size: .82em;
  background: #fff;
  border: 1px solid var(--line-strong);
  border-bottom-width: 3px;
  border-radius: 7px;
  padding: .1em .5em;
  color: var(--ink-2);
  white-space: nowrap;
}

.muted{ color: var(--muted); }
.center{ text-align: center; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

::selection{ background: var(--brand); color: #fff; }

:focus-visible{ outline: 3px solid var(--brand); outline-offset: 3px; border-radius: 6px; }

/* 滚动条（桌面） */
::-webkit-scrollbar{ width: 12px; height: 12px; }
::-webkit-scrollbar-thumb{ background: #CFE2F5; border-radius: 999px; border: 3px solid #fff; }
::-webkit-scrollbar-thumb:hover{ background: #A9CCEA; }

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