/* =====================================================
* 教学工具 — 共享设计令牌（双主题）
* 参照 Design/Claude/DESIGN.md：
* - 浅色（默认）：暖米色画布 + 深海军色"画板" + 珊瑚色 CTA
* - 深色：深海军色画布 + 米色"画板" + 珊瑚色 CTA（节奏反转）
*
* 每个工具的 加：
*
*
*
* 主题切换由 tool-header.js 接管：
* - 复用入口页的 localStorage 键 'oscar-theme'
* - 切换时设置 并派发 themechange CustomEvent
* - canvas/plotly 工具监听 themechange → 读 CSS 变量 → 重绘
* ===================================================== */
/* ---------- Claude 原始色板（不再随主题变化） ---------- */
:root {
--claude-primary: #cc785c;
--claude-primary-active: #a9583e;
--claude-primary-disabled: #e6dfd8;
--claude-ink-light: #141413; /* 浅色主题下的 ink */
--claude-ink-dark: #faf9f5; /* 深色主题下的 ink */
--claude-body-light: #3d3d3a;
--claude-body-dark: #c8c5be;
--claude-muted-light: #6c6a64;
--claude-muted-dark: #a09d96;
--claude-hairline-light: #e6dfd8;
--claude-hairline-dark: #2f2c28;
--claude-canvas-light: #faf9f5; /* 浅色主题页 bg */
--claude-canvas-dark: #0f1419; /* 深色主题页 bg */
--claude-surface-soft-light: #f5f0e8;
--claude-surface-soft-dark: #1f1e1b;
--claude-surface-card-light: #efe9de;
--claude-surface-card-dark: #252320;
--claude-surface-cream-strong-light: #e8e0d2;
--claude-surface-cream-strong-dark: #2a2724;
--claude-surface-graph-light: #181715; /* 浅色主题的画板（深色） */
--claude-surface-graph-dark: #faf9f5; /* 深色主题的画板（米色，反转） */
--claude-on-primary: #ffffff;
--claude-on-graph-light: #faf9f5; /* 浅色主题画板上的文字（米色） */
--claude-on-graph-dark: #141413; /* 深色主题画板上的文字（深色） */
--claude-on-graph-soft-light: #a09d96;
--claude-on-graph-soft-dark: #6c6a64;
--claude-accent-teal: #5db8a6;
--claude-accent-amber: #e8a55a;
--claude-success: #5db872;
/* 字体 */
--claude-font-serif: "Tiempos Headline", "Copernicus", "EB Garamond", "Source Serif Pro", Georgia, serif;
--claude-font-sans: "StyreneB", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--claude-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
/* 圆角 / 缓动 */
--claude-r-md: 8px;
--claude-r-lg: 12px;
--claude-r-xl: 16px;
--claude-r-pill: 9999px;
--elastic-bezier: cubic-bezier(0.34, 1.56, 0.64, 1);
--smooth-bezier: cubic-bezier(0.4, 0, 0.2, 1);
}
/* ---------- 浅色主题（默认） ---------- */
:root,
:root[data-theme="light"] {
/* 主色板 */
--primary: var(--claude-primary);
--primary-active: var(--claude-primary-active);
--primary-disabled: var(--claude-primary-disabled);
--ink: var(--claude-ink-light);
--body: var(--claude-body-light);
--muted: var(--claude-muted-light);
--muted-soft: #8e8b82;
--hairline: var(--claude-hairline-light);
--hairline-soft: #ebe6df;
/* 表面 */
--canvas: var(--claude-canvas-light);
--surface-soft: var(--claude-surface-soft-light);
--surface-card: var(--claude-surface-card-light);
--surface-cream-strong: var(--claude-surface-cream-strong-light);
/* "画板"表面（数学/图表容器）—— 浅色主题下是深色块 */
--graph-card: var(--claude-surface-graph-light);
--graph-card-elevated: #252320;
--on-graph: var(--claude-on-graph-light);
--on-graph-soft: var(--claude-on-graph-soft-light);
--graph-card-border: rgba(204, 120, 92, 0.30);
--graph-card-shadow: 0 1px 2px rgba(20, 20, 19, 0.04), 0 8px 24px rgba(20, 20, 19, 0.04);
/* 兼容别名（旧工具用） */
--primary-color: var(--claude-primary);
--secondary-color: var(--claude-ink-light);
--accent-color: var(--claude-primary);
--accent-teal: var(--claude-accent-teal);
--accent-amber: var(--claude-accent-amber);
--light-color: var(--canvas);
--dark-color: var(--ink);
--bg-color: var(--canvas);
--card-bg: var(--surface-card);
--card-border: 1px solid var(--hairline);
--card-shadow: 0 1px 2px rgba(20, 20, 19, 0.04), 0 8px 24px rgba(20, 20, 19, 0.04);
--text-color: var(--ink);
--text-secondary: var(--muted);
--text-muted: var(--muted);
--success-color: var(--claude-success);
/* 字体的简短别名 */
--font-serif: var(--claude-font-serif);
--font-sans: var(--claude-font-sans);
--font-mono: var(--claude-font-mono);
/* 圆角 */
--r-md: var(--claude-r-md);
--r-lg: var(--claude-r-lg);
--r-xl: var(--claude-r-xl);
--r-pill: var(--claude-r-pill);
color-scheme: light;
}
/* ---------- 深色主题 ---------- */
:root[data-theme="dark"] {
--primary: var(--claude-primary);
--primary-active: var(--claude-primary-active);
--ink: var(--claude-ink-dark);
--body: var(--claude-body-dark);
--muted: var(--claude-muted-dark);
--muted-soft: #8e8b82;
--hairline: var(--claude-hairline-dark);
--hairline-soft: #3a3633;
--canvas: var(--claude-canvas-dark);
--surface-soft: var(--claude-surface-soft-dark);
--surface-card: var(--claude-surface-card-dark);
--surface-cream-strong: var(--claude-surface-cream-strong-dark);
/* 深色主题下"画板"反转成米色 —— 维持 Claude 节奏 */
--graph-card: var(--claude-surface-graph-dark);
--graph-card-elevated: #ebe6df;
--on-graph: var(--claude-on-graph-dark);
--on-graph-soft: var(--claude-on-graph-soft-dark);
--graph-card-border: rgba(204, 120, 92, 0.30);
--graph-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.20), 0 8px 24px rgba(0, 0, 0, 0.30);
--primary-color: var(--claude-primary);
--secondary-color: var(--claude-ink-dark);
--accent-color: var(--claude-primary);
--accent-teal: var(--claude-accent-teal);
--light-color: var(--canvas);
--dark-color: var(--ink);
--bg-color: var(--canvas);
--card-bg: var(--surface-card);
--card-border: 1px solid var(--hairline);
--card-shadow: 0 1px 2px rgba(0, 0, 0, 0.20), 0 8px 24px rgba(0, 0, 0, 0.30);
--text-color: var(--ink);
--text-secondary: var(--muted);
--text-muted: var(--muted);
--success-color: var(--claude-success);
--font-serif: var(--claude-font-serif);
--font-sans: var(--claude-font-sans);
--font-mono: var(--claude-font-mono);
--r-md: var(--claude-r-md);
--r-lg: var(--claude-r-lg);
--r-xl: var(--claude-r-xl);
--r-pill: var(--claude-r-pill);
color-scheme: dark;
}
/* ---------- 系统偏好（仅在未显式设置 data-theme 时生效） ---------- */
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) {
--primary: var(--claude-primary);
--primary-active: var(--claude-primary-active);
--ink: var(--claude-ink-dark);
--body: var(--claude-body-dark);
--muted: var(--claude-muted-dark);
--muted-soft: #8e8b82;
--hairline: var(--claude-hairline-dark);
--hairline-soft: #3a3633;
--canvas: var(--claude-canvas-dark);
--surface-soft: var(--claude-surface-soft-dark);
--surface-card: var(--claude-surface-card-dark);
--surface-cream-strong: var(--claude-surface-cream-strong-dark);
--graph-card: var(--claude-surface-graph-dark);
--graph-card-elevated: #ebe6df;
--on-graph: var(--claude-on-graph-dark);
--on-graph-soft: var(--claude-on-graph-soft-dark);
--text-color: var(--ink);
--text-secondary: var(--muted);
--text-muted: var(--muted);
color-scheme: dark;
}
}
/* ---------- 基础元素（仅在工具未显式覆盖时生效） ---------- */
html, body {
background-color: var(--canvas);
color: var(--body);
font-family: var(--font-sans);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4 {
font-family: var(--font-serif);
font-weight: 400;
color: var(--ink);
letter-spacing: -0.3px;
}
/* ---------- 实用类（工具可选用） ---------- */
.eyebrow {
font-family: var(--font-sans);
font-size: 12px;
font-weight: 500;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 16px;
}
.cream-card {
background-color: var(--surface-card);
border: 1px solid var(--hairline);
border-radius: var(--r-lg);
padding: 20px;
color: var(--ink);
transition: background-color 0.2s ease, border-color 0.2s ease;
}
.cream-card-soft {
background-color: var(--surface-soft);
border-radius: var(--r-lg);
padding: 20px;
color: var(--ink);
transition: background-color 0.2s ease;
}
/* 深色"画板"卡片（数学/图表容器）
* 浅色主题：画板是深色块，嵌在米色页里
* 深色主题：画板是米色块，嵌在深色页里（Claude 节奏反转） */
.graph-card {
background-color: var(--graph-card);
color: var(--on-graph);
border: 1px solid var(--graph-card-border);
border-radius: var(--r-xl);
padding: 24px;
transition: background-color 0.2s ease, color 0.2s ease;
}
.reset-btn,
.primary-btn {
font-family: var(--font-sans);
font-size: 14px;
font-weight: 500;
color: var(--claude-on-primary);
background-color: var(--primary);
border: 0;
border-radius: var(--r-md);
padding: 12px 20px;
cursor: pointer;
transition: background-color 0.15s ease;
}
.reset-btn:hover,
.primary-btn:hover { background-color: var(--primary-active); }
.secondary-btn {
font-family: var(--font-sans);
font-size: 14px;
font-weight: 500;
color: var(--ink);
background-color: var(--canvas);
border: 1px solid var(--hairline);
border-radius: var(--r-md);
padding: 12px 20px;
cursor: pointer;
}
input[type="text"],
input[type="number"],
textarea,
select {
font-family: var(--font-sans);
font-size: 14px;
color: var(--ink);
background-color: var(--canvas);
border: 1px solid var(--hairline);
border-radius: var(--r-md);
padding: 10px 12px;
outline: none;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input[type="text"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(204, 120, 92, 0.18);
}
.mode-toggle {
display: inline-flex;
align-items: center;
gap: 4px;
background-color: var(--surface-soft);
border: 1px solid var(--hairline);
border-radius: var(--r-pill);
padding: 4px;
}
.mode-btn {
font-family: var(--font-sans);
font-size: 14px;
font-weight: 500;
color: var(--muted);
background: transparent;
border: 0;
padding: 10px 18px;
border-radius: var(--r-pill);
cursor: pointer;
transition: color 0.2s ease, background-color 0.2s ease;
}
.mode-btn:hover { color: var(--ink); }
.mode-btn.active {
background-color: var(--graph-card);
color: var(--on-graph);
}
a {
color: var(--primary);
text-decoration: none;
}
a:hover { color: var(--primary-active); }
table { border-collapse: collapse; }
th, td {
padding: 10px 12px;
border-bottom: 1px solid var(--hairline);
text-align: left;
font-family: var(--font-sans);
font-size: 14px;
color: var(--body);
}
th { color: var(--muted); font-weight: 500; font-size: 13px; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
background: var(--hairline);
border-radius: var(--r-pill);
border: 2px solid var(--canvas);
}
::-webkit-scrollbar-thumb:hover { background: var(--muted-soft); }
::-webkit-scrollbar-track { background: transparent; }