/* ============================================================
   base.css — Design Tokens & Foundation
   摩尔线程GPU学习中心 — Light Reading Theme
   2026-08-12
   ------------------------------------------------------------
   Single light theme. Chinese type = Source Han Serif
   (Noto Serif SC on Google Fonts); code = JetBrains Mono.
   Fonts are loaded via <link> in index.html (preconnect +
   display=swap) so a CDN failure degrades to the local
   Songti SC / STSong / serif fallbacks below.
   ============================================================ */

/* --- Design Tokens (light only) --- */
:root {
  /* Brand — muted teal, used as accent only, never as a large fill */
  --brand-primary: #0d7d74;          /* 5.06:1 on white */
  --brand-primary-rgb: 13, 125, 116;
  --brand-primary-dark: #0a635c;     /* 7.1:1 on white — for text on tints */
  --brand-secondary: #1d4ed8;        /* blue-700, 7.0:1 on white */
  --brand-secondary-rgb: 29, 78, 216;

  /* Backgrounds — warm white / very light neutral */
  --bg-base: #faf9f7;
  --bg-surface-1: #ffffff;
  --bg-surface-2: #f5f4f1;
  --bg-surface-3: #eceae5;
  --bg-code: #f7f7f5;                /* light code canvas */
  --bg-code-header: #efeeea;
  --bg-hover: rgba(13, 125, 116, 0.06);
  --bg-active: rgba(13, 125, 116, 0.10);

  /* Text — all AA or better on --bg-surface-1 / --bg-base */
  --text-primary: #1b1a18;           /* 16.5:1 */
  --text-secondary: #3c3a36;         /* 10.7:1 — body copy */
  --text-muted: #6a675f;             /* 5.4:1 — meta only */
  --text-accent: var(--brand-primary-dark);
  --text-link: #0a635c;
  --text-inverse: #ffffff;

  /* Borders — visible hairlines, no glow */
  --border-subtle: rgba(27, 26, 24, 0.09);
  --border-default: rgba(27, 26, 24, 0.16);
  --border-strong: rgba(27, 26, 24, 0.28);
  --border-accent: rgba(13, 125, 116, 0.45);

  /* Alerts — pale tint + saturated border + dark readable text */
  --alert-tip-bg: #edf7f1;
  --alert-tip-border: #12805a;
  --alert-tip-text: #0f5d43;
  --alert-warning-bg: #fdf5e6;
  --alert-warning-border: #b7791f;
  --alert-warning-text: #7c4f10;
  --alert-danger-bg: #fdeeee;
  --alert-danger-border: #c02626;
  --alert-danger-text: #97211f;
  --alert-info-bg: #eef2fd;
  --alert-info-border: #1d4ed8;
  --alert-info-text: #1e40af;

  /* Semantic status (badges, dots) — dark enough for text use */
  --status-ok: #0f6f4d;
  --status-warn: #8a5a08;
  --status-danger: #b02121;

  /* Shadows — soft, neutral, low opacity */
  --shadow-sm: 0 1px 2px rgba(27, 26, 24, 0.05);
  --shadow-md: 0 2px 8px rgba(27, 26, 24, 0.06);
  --shadow-lg: 0 8px 24px rgba(27, 26, 24, 0.08);
  --shadow-glow: 0 2px 10px rgba(13, 125, 116, 0.18);

  /* Typography */
  --font-serif: 'Noto Serif SC', 'Source Han Serif SC', 'Source Han Serif CN',
                'Songti SC', 'STSong', 'SimSun', Georgia, serif;
  --font-body: var(--font-serif);
  --font-ui: var(--font-serif);
  /* Latin-only micro labels (badges, uppercase tags) */
  --font-latin: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'SFMono-Regular', 'SF Mono', Consolas,
               'Liberation Mono', Menlo, monospace;

  --text-xs: 0.8125rem;   /* 13px */
  --text-sm: 0.9375rem;   /* 15px */
  --text-base: 1.0625rem; /* 17px — body */
  --text-lg: 1.1875rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.625rem;
  --text-3xl: 2rem;
  --text-4xl: 2.375rem;
  --text-hero: 2.75rem;
  --line-height-tight: 1.35;
  --line-height-normal: 1.7;
  --line-height-relaxed: 1.9;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* Layout — an ~840px text column at 17px CJK gives ~49 characters per
     line, inside the comfortable 45–75 character reading range. */
  --sidebar-width: 280px;
  --header-height: 60px;
  --toc-width: 220px;
  --content-max-width: 900px;
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 12px;

  /* Transitions */
  --transition-fast: 140ms ease;
  --transition-normal: 220ms ease;
  --transition-slow: 360ms ease;
}

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  background-color: var(--bg-base);
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--line-height-normal);
  color: var(--text-primary);
  background-color: var(--bg-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  max-width: 100vw;
}

a {
  color: var(--text-link);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover {
  color: var(--brand-primary-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}

img { max-width: 100%; height: auto; }
button { cursor: pointer; font-family: inherit; }
code, pre, kbd, samp { font-family: var(--font-mono); }

/* --- Focus visibility (never colour-only) --- */
:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
  border-radius: 3px;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

/* --- Scrollbar (light) --- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-surface-2); }
::-webkit-scrollbar-thumb {
  background: #c9c6bf;
  border-radius: 6px;
  border: 2px solid var(--bg-surface-2);
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: #a9a59c;
  background-clip: padding-box;
}
* { scrollbar-color: #c9c6bf var(--bg-surface-2); scrollbar-width: thin; }

/* --- Selection --- */
::selection {
  background: rgba(13, 125, 116, 0.18);
  color: var(--text-primary);
}

/* --- Decorative background hooks kept as no-ops --------------
   .circuit-bg / .circuit-dots are still emitted by app.js; the
   light theme deliberately renders no pattern behind text. */
.circuit-bg,
.circuit-dots { position: relative; }