/* =============================================================
* tokens.css —— 设计系统单一真相源(AI图片大师)
*
* 主题:Pro Dark(专业深色)。规范见 ../DESIGN.md。
*
* 【加载约定】必须作为 index.html 中第一个样式表 ,
* 早于 inline-extracted.css —— 保证首屏前 :root 变量已就绪,无闪烁。
*
* 【底色通道 token】*-rgb 为「R G B」空格三元组,配合
* rgb(var(--x-rgb) / ) 使用,等价于 rgba(R,G,B,alpha)。
*
* 分层:① 主题 token(深色,可整体换肤)② 调色板原始档(供鲜艳实色类/通道复用)。
* 未来加明暗切换:把 ① 包进 [data-theme] 即可。
* ============================================================= */
:root {
/* ===================================================================
* ① 主题 token(Pro Dark)
* =================================================================== */
/* ---- 面板 / 背景(柔和石墨灰,层级越高越亮;再提亮 ~5%)---- */
--bg: #1E2027; /* 页面背景(舒适深灰,非纯黑)*/
--surface: #2A2D36; /* 主面板/卡片(与 bg 明显区分)*/
--surface-2: #353A44; /* 抬升/次级面板 */
--surface-3: #424754; /* 输入框/内嵌 */
--surface-dark: #232732; /* 深色弹窗(历史详情)*/
--surface-darker: #191B21; /* 更深弹窗底 */
--line: #3D434F; /* 默认细边框 */
--line-strong: #525869; /* 强调边框/分隔 */
/* ---- 文字(由亮到暗)---- */
--content-strong: #F5F6F8; /* 标题 */
--content: #DADCE3; /* 正文 */
--content-soft: #A9ACB6; /* 次要 */
--content-stronger:#FFFFFF; /* 最强调 */
--muted: #7E818D; /* 辅助 */
--faint: #585B66; /* 占位/禁用 */
/* ---- 品牌(靛紫,为深色提亮)---- */
--brand-primary: #7C8BFF;
--brand-primary-end: #9A6BFF;
--brand-primary-hover: #8F9DFF;
--brand-primary-hover-end: #AC83FF;
--brand-primary-rgb: 124 139 255;
--on-brand: #FFFFFF;
--gradient-brand: linear-gradient(135deg, #7C8BFF 0%, #9A6BFF 100%);
--gradient-brand-hover: linear-gradient(135deg, #8F9DFF 0%, #AC83FF 100%);
/* ---- 状态色(深色用更亮的 400 档,保证可读)---- */
--color-success: #34D399; --color-success-rgb: 52 211 153;
--color-warning: #FBBF24; --color-warning-rgb: 251 191 36;
--color-error: #F87171; --color-error-rgb: 248 113 113;
--color-info: #60A5FA; --color-info-rgb: 96 165 250;
--color-highlight: #FDE047; --color-highlight-rgb: 253 224 71;
/* 状态软底(callout 深色软底)= 同色 12% */
--success-soft: rgb(var(--color-success-rgb) / 0.12);
--warning-soft: rgb(var(--color-warning-rgb) / 0.12);
--danger-soft: rgb(var(--color-error-rgb) / 0.12);
--info-soft: rgb(var(--color-info-rgb) / 0.12);
--brand-soft: rgb(var(--brand-primary-rgb) / 0.14);
/* 旧 *-bg 名沿用,指向软底(原为浅色 tint,深色下重映射)*/
--color-success-bg: var(--success-soft);
--color-warning-bg: var(--warning-soft);
--color-info-bg: var(--info-soft);
--color-highlight-bg: rgb(var(--color-highlight-rgb) / 0.12);
/* 状态衍生(沿用名,深色下取亮档)*/
--color-success-deep: #10B981;
--color-warning-strong: #FB923C; --color-warning-strong-rgb: 251 146 60;
--color-warning-deep: #F59E0B;
--color-error-strong: #EF4444; --color-error-strong-rgb: 239 68 68;
--color-error-deep: #DC2626;
--color-error-soft: #FCA5A5;
--color-info-soft: #93C5FD;
--color-highlight-deep: #FCD34D;
/* ---- 渐变 ---- */
--gradient-warning: linear-gradient(135deg, #FB923C, #F87171);
--gradient-warning-bar: linear-gradient(to right, #FBBF24, #FB923C);
/* ---- 玻璃签名 → 深色纯面板(结构 CSS 已转 solid,这里兜底)---- */
--surface-glass-bg: var(--surface);
--surface-glass-border: var(--line);
--glass-blur: 10px;
/* ---- 阴影 / 海拔(深色更深更柔)---- */
--shadow-sm: 0 1px 3px rgb(var(--black-rgb) / 0.4);
--shadow: 0 4px 16px rgb(var(--black-rgb) / 0.45);
--shadow-lg: 0 12px 40px rgb(var(--black-rgb) / 0.55);
--shadow-xl: 0 20px 60px rgb(var(--black-rgb) / 0.6);
--focus-ring: 0 0 0 3px rgb(var(--brand-primary-rgb) / 0.35);
--focus-ring-light: 0 0 0 3px rgb(var(--white-rgb) / 0.25);
/* ===================================================================
* ② 调色板原始档(供鲜艳实色 Tailwind 类 / rgb 通道复用,值不随主题变)
* =================================================================== */
--gray-50: #f9fafb; --gray-100: #f3f4f6; --gray-200: #e5e7eb; --gray-300: #d1d5db;
--gray-400: #9ca3af; --gray-500: #6b7280; --gray-600: #4b5563; --gray-700: #374151;
--gray-800: #1f2937; --gray-900: #111827;
--gray-700-rgb: 55 65 81; --gray-600-rgb: 75 85 99; --gray-500-rgb: 107 114 128;
--gray-400-rgb: 156 163 175; --gray-300-rgb: 209 213 219;
--state-green: #22c55e; --state-green-rgb: 34 197 94;
--amber-400: #fbbf24; --amber-400-rgb: 251 191 36;
--orange-400-rgb: 251 146 60; --orange-600-rgb: 234 88 12; --orange-900-rgb: 124 45 18;
--red-400-rgb: 248 113 113; --red-300-rgb: 252 165 165; --red-100-rgb: 254 226 226;
--amber-100-rgb: 254 243 199;
--blue-200: #bfdbfe; --blue-300: #93c5fd;
--accent-purple: #8b5cf6; --state-purple-rgb: 147 51 234;
--pink-400-rgb: 244 114 182; --forest-green-rgb: 34 139 34;
/* 装饰停色(模型卡主题等)*/
--accent-coral:#ff6b6b; --accent-rose:#f5576c; --accent-magenta:#f093fb;
--accent-peach:#ff9a9e; --accent-pink:#fecfef; --accent-sky:#4facfe;
--accent-cyan:#00f2fe; --accent-orange:#ffa500; --accent-sky-deep:#3498db;
/* 中性纯色 / 骨架(深色)*/
--white: #ffffff; --black: #000000;
--skeleton-100: #1E2026; --skeleton-200: #2A2C34;
/* 叠加底色通道 */
--white-rgb: 255 255 255; --black-rgb: 0 0 0; --surface-darker-rgb: 16 17 22;
/* ===================================================================
* 字体 / 间距 / 圆角 / 运动(本阶段不变)
* =================================================================== */
--font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
--text-2xs: 0.625rem; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem;
--text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.25rem;
--font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700;
--space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
--space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem;
--radius-sm: 0.25rem; --radius: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem; --radius-full: 9999px;
--transition: all 0.3s ease;
}