/* ============================================================================
   笔芯AI图片转矢量工具 · 设计令牌（Design Tokens）
   ----------------------------------------------------------------------------
   本文件是全站视觉的**唯一数据源**。所有颜色、字体、间距、圆角、阴影、动效、
   层级都必须引用这里的变量，禁止在业务 CSS 里写死色值/尺寸。

   加载顺序要求：tokens.css 必须在 style.css **之前** 引入。

   两处重要说明：
   1. 标注「[原值]」的令牌是产品上线时就在用的颜色，**逐字保留**，改动会造成视觉回归。
   2. 标注「[修正]」的令牌经过 WCAG 实测后调整过，修正依据见 docs/DESIGN-SYSTEM.md
      的「配色对比度实测」章节，每一条都有 :1 数值。
   ============================================================================ */

:root {
  /* ==========================================================================
     1. 基础色板 · Palette
     命名规则：<色系>-<档位>，档位 50(最浅) → 900(最深)，500 为基准色。
     业务代码不要直接用色板，请用第 3 节的语义令牌。
     ========================================================================== */

  /* --- 品牌紫（主色）------------------------------------------------------- */
  --brand-50:  #eef0ff;   /* [原值] 原 --brand-soft */
  --brand-100: #e3e1fd;
  --brand-200: #cbc7fb;
  --brand-300: #a9a2f6;
  --brand-400: #8b7ef0;
  --brand-500: #6c5ce7;   /* [原值] 原 --brand，品牌主色，用于主按钮/选中态 */
  --brand-600: #4f46e5;   /* [原值] 原 --brand-2，主按钮渐变深端 */
  --brand-700: #4038b8;
  --brand-800: #322c92;
  --brand-900: #26216d;

  /* --- 青色（辅色 / 渐变第二端）-------------------------------------------- */
  --accent-50:  #ebfcff;
  --accent-100: #d8f9fe;
  --accent-200: #b0f2fc;
  --accent-300: #7ce8f8;
  --accent-400: #22d3ee;  /* [原值] 原 --cyan，仅用于 logo / 装饰 / 大面积渐变 */
  --accent-500: #12bdd8;
  --accent-600: #0e9bb1;  /* [修正] 渐变**文字**的深端，白底 3.11:1（大字 ≥3:1 达标） */
  --accent-700: #0991a6;  /* [修正] 进度条渐变深端，对轨道 3.29:1（图形 ≥3:1 达标） */
  --accent-800: #077f90;
  --accent-900: #055b6c;

  /* --- 中性阶（冷灰，与产品既有灰调一致）---------------------------------- */
  --gray-0:   #ffffff;
  --gray-25:  #fcfcff;    /* [原值] .target 行底色 */
  --gray-50:  #fbfbfe;    /* [原值] .dropzone 底色 */
  --gray-75:  #f6f7fb;    /* [原值] 原 --bg，页面底 */
  --gray-100: #f3f4f9;    /* [原值] .tabs 槽底色 */
  --gray-150: #eef0f7;    /* [原值] .progress 轨道 */
  --gray-200: #e8eaf3;    /* [原值] 原 --line，默认描边 */
  --gray-250: #d5d8ea;    /* [原值] .dropzone 虚线 */
  --gray-300: #c7cbe4;    /* [原值] 卡片 hover 描边 */
  --gray-350: #b9bdd0;
  --gray-400: #9aa0b8;    /* 仅可用于图标/装饰，对白底 2.59:1 不达文字标准 */
  --gray-500: #6b7189;    /* [修正] 原 --ink-3 为 #8388a0(3.27:1 不达标)，→ 4.51:1 */
  --gray-600: #5c6180;
  --gray-700: #454a63;    /* [原值] 原 --ink-2，次级文字 */
  --gray-800: #2c2f4a;
  --gray-900: #14162b;    /* [原值] 原 --ink，正文/标题 */

  /* --- 语义状态色（每组 = 主色 + 浅底 + 描边）----------------------------- */
  --ok-50:   #ecfdf5;     /* 成功 浅底 */
  --ok-100:  #a7f3d0;     /* 成功 描边 */
  --ok-500:  #10b981;     /* [原值] 原 --ok */
  --ok-700:  #047857;     /* 成功 文字（5.21:1） */
  --ok-900:  #065f46;     /* [原值] 成功 Toast 底（白字 7.68:1） */

  --warn-50:  #fff7e6;    /* 警告 浅底 */
  --warn-100: #fff2e0;    /* [修正] 原 #ffeccc 配 #b45309 仅 4.33:1 → 4.55:1 */
  --warn-200: #fde3b2;    /* 警告 描边 */
  --warn-500: #f59e0b;    /* [原值] 原 --warn（当前无引用，保留备用） */
  --warn-700: #b45309;    /* 警告 文字（4.55:1） */

  --err-25:  #fef6f6;     /* 失败 行底 */
  --err-50:  #fef2f2;     /* 失败 浅底 */
  --err-100: #fecaca;     /* 失败 描边 */
  --err-500: #dc2626;     /* [修正] 原 #ef4444 3.54~3.76:1 不达标 → 4.54:1 双角色达标 */
  --err-700: #b91c1c;     /* 失败 深色文字（5.91:1） */
  --err-900: #991b1b;     /* 失败 Toast 底 */

  --info-50:  #eef2ff;    /* 信息 浅底 */
  --info-500: #4f46e5;    /* 信息 文字（5.62:1），与 brand-600 同值 */

  /* --- 支付渠道商标色（WCAG 1.4.3 logotype 例外，禁止改色）----------------- */
  --pay-alipay: #1677ff;
  --pay-wxpay:  #07c160;


  /* ==========================================================================
     2. 兼容别名 · Legacy Aliases
     业务 CSS 仍在引用这些名字，保留以免破坏现有样式。新代码请用第 3 节。
     ========================================================================== */
  --brand: var(--brand-500);
  --brand-2: var(--brand-600);
  --brand-soft: var(--brand-50);
  --cyan: var(--accent-400);
  --ok: var(--ok-500);
  --warn: var(--warn-500);
  --err: var(--err-500);
  --ink: var(--gray-900);
  --ink-2: var(--gray-700);
  --ink-3: var(--gray-500);
  --line: var(--gray-200);
  --bg: var(--gray-75);
  --card: var(--gray-0);
  --r: var(--radius-2xl);


  /* ==========================================================================
     3. 语义令牌 · Semantic Tokens  ← 业务代码只用这一层
     ========================================================================== */

  /* 文字 */
  --text-primary: var(--gray-900);      /* 正文、标题          17.81:1 */
  --text-secondary: var(--gray-700);    /* 描述、副标题         8.70:1 */
  --text-muted: var(--gray-500);        /* 提示、元信息         4.83:1 */
  --text-disabled: var(--gray-400);     /* 仅用于 disabled 态 */
  --text-on-brand: #ffffff;             /* 主色底上的文字       4.86:1 */
  --text-link: var(--brand-600);

  /* 表面 */
  --surface: var(--gray-0);             /* 卡片、弹窗 */
  --surface-sunken: var(--gray-75);     /* 页面底 */
  --surface-subtle: var(--gray-50);     /* 内嵌区块底 */
  --surface-brand-soft: var(--brand-50);
  --surface-overlay: rgba(20, 22, 43, .45);   /* 弹窗蒙层 */

  /* 描边 */
  --border: var(--gray-200);
  --border-hover: var(--gray-300);
  --border-strong: var(--gray-250);
  --border-brand: var(--brand-500);

  /* 状态（语义化，业务直接按语义取色） */
  --status-success-fg: var(--ok-700);
  --status-success-bg: var(--ok-50);
  --status-warning-fg: var(--warn-700);
  --status-warning-bg: var(--warn-50);
  --status-danger-fg: var(--err-500);
  --status-danger-bg: var(--err-50);

  /* 渐变 */
  --gradient-brand: linear-gradient(135deg, var(--brand-500), var(--brand-600));
  --gradient-brand-text: linear-gradient(135deg, var(--brand-500), var(--accent-600));
  --gradient-progress: linear-gradient(90deg, var(--brand-500), var(--accent-700));
  --gradient-soft: linear-gradient(135deg, #f5f3ff, #eef6ff);


  /* ==========================================================================
     4. 字体 · Typography
     ========================================================================== */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  /* 字号阶梯（1.125 近似比）—— 新代码按此取值 */
  --fs-xs:   12px;    /* 最小辅助文字，不得再小 */
  --fs-sm:   13px;
  --fs-base: 14px;    /* 界面正文基准 */
  --fs-md:   15px;
  --fs-lg:   16px;
  --fs-xl:   18px;
  --fs-2xl:  22px;
  --fs-3xl:  30px;
  --fs-4xl:  40px;    /* 仅 hero h1 */

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold:    700;
  --fw-black:   800;

  --lh-tight:  1.3;   /* 标题 */
  --lh-snug:   1.45;  /* 紧凑正文 */
  --lh-base:   1.6;   /* 正文（body 默认） */
  --ls-tight:  -.01em;
  --ls-tighter: -.02em;


  /* ==========================================================================
     5. 间距 · Spacing
     基准 2px 半档 + 4px 栅格。组件内边距用 2/3 档，区块间距用 5/6/8 档。
     ========================================================================== */
  --space-0-5: 2px;
  --space-1:   4px;
  --space-1-5: 6px;
  --space-2:   8px;
  --space-2-5: 10px;
  --space-3:   12px;
  --space-3-5: 14px;
  --space-4:   16px;
  --space-4-5: 18px;
  --space-5:   20px;
  --space-6:   24px;
  --space-6-5: 26px;
  --space-8:   32px;
  --space-10:  40px;
  --space-13:  52px;


  /* ==========================================================================
     6. 圆角 · Radius
     ========================================================================== */
  --radius-xs:   6px;    /* 徽章内小标签 */
  --radius-sm:   8px;    /* 小按钮、开关 */
  --radius-md:   10px;   /* 按钮、输入框 */
  --radius-lg:   12px;
  --radius-xl:   14px;   /* 卡片、面板内块 */
  --radius-2xl:  16px;   /* 面板（= 旧 --r） */
  --radius-3xl:  18px;   /* 弹窗 */
  --radius-hero: 24px;   /* 大视觉块 */
  --radius-pill: 999px;  /* 胶囊标签 */


  /* ==========================================================================
     7. 阴影 · Elevation
     统一为「低对比阴影 + 冷色调」两层结构，保证深浅底都可读。
     ========================================================================== */
  --shadow-s: 0 1px 2px rgba(20, 22, 43, .05), 0 2px 8px rgba(20, 22, 43, .04);
  --shadow-m: 0 4px 12px rgba(20, 22, 43, .06), 0 12px 32px rgba(20, 22, 43, .06);
  --shadow-l: 0 10px 30px rgba(20, 22, 43, .10), 0 30px 60px rgba(20, 22, 43, .08);
  --shadow-brand: 0 4px 14px rgba(108, 92, 231, .32);
  --shadow-brand-hover: 0 6px 20px rgba(108, 92, 231, .42);
  --shadow-focus: 0 0 0 3px rgba(79, 70, 229, .18);


  /* ==========================================================================
     8. 动效 · Motion
     ========================================================================== */
  --dur-instant: 100ms;   /* 按下反馈 */
  --dur-fast:    150ms;   /* hover / 描边 */
  --dur-base:    180ms;   /* 位移、缩放 */
  --dur-slow:    260ms;   /* 弹窗、Toast 入场 */
  --dur-progress: 500ms;  /* 进度条推进，让它看起来是"走"的 */
  --ease-out:    cubic-bezier(.22, .61, .36, 1);
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);

  /* ⚠️ 禁止在控件上写 `transition: all`。
     `all` 会把 outline-color / outline-width 也纳入过渡，导致键盘聚焦时
     焦点环从「3px、currentColor」渐变成目标色，既抖一下又短暂不可见 ——
     实测过：button.btn 聚焦瞬间读到的是 rgb(20,22,43) 3px，而不是设定的 2px 蓝环。
     控件一律用下面这组显式属性。 */
  --transition-control:
    background-color var(--dur-fast) var(--ease-out),
    border-color     var(--dur-fast) var(--ease-out),
    color            var(--dur-fast) var(--ease-out),
    box-shadow       var(--dur-fast) var(--ease-out),
    transform        var(--dur-fast) var(--ease-out);


  /* ==========================================================================
     9. 焦点环 · Focus Ring（无障碍必需）
     实测：--brand-600 对白底 6.29:1、对页面底 5.52:1，均远超 1.4.11 要求的 3:1。
     ========================================================================== */
  --focus-ring-color: var(--brand-600);
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;


  /* ==========================================================================
     10. 层级 · Z-index
     只允许用这 4 档，禁止随手写 9999。
     ========================================================================== */
  --z-base:   0;
  --z-sticky: 50;    /* 顶栏 */
  --z-modal:  100;   /* 弹窗 */
  --z-toast:  200;   /* 全局提示，永远最上层 */


  /* ==========================================================================
     11. 布局 · Layout
     ========================================================================== */
  --container-max: 1080px;
  --container-pad: 20px;
  --topbar-h: 62px;
  --breakpoint-md: 860px;   /* 唯一的移动端断点，与 style.css 保持一致 */
}


/* ============================================================================
   基础层 · Base
   ============================================================================ */

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

/* ⚠️ 这一条不能删。
   元素自带 display:grid / flex 时，会覆盖 UA 样式表里 [hidden]{display:none}，
   导致弹窗永远显示、点关闭也关不掉 —— 本产品线上曾因此出过故障。 */
[hidden] { display: none !important; }

/* 屏幕阅读器专用文本（视觉隐藏但仍可被朗读） */
.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;
}

/* --- 全局焦点环 -----------------------------------------------------------
   用 :where() 把优先级压到 0，业务样式里任何 outline 声明都能覆盖它，
   不会出现"焦点环去不掉"或"盖住设计"的副作用。
   仅在键盘操作时出现（:focus-visible），鼠标点击不显示。 */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}
/* 鼠标点击时不要焦点环，保持界面干净 */
:where(a, button, input, select, textarea, summary, [tabindex]):focus:not(:focus-visible) {
  outline: none;
}

/* --- 尊重系统「减弱动态效果」偏好 -----------------------------------------
   前庭功能障碍用户会因动效产生眩晕，这是 WCAG 2.3.3 要求。 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}