/* ============================================================
   设计令牌层（Design Tokens）
   布丁跨境数智平台 · 前端 UI 风格改造 · 阶段 0

   分层约定（详见 docs/前端UI风格改造需求文档.md §4.1）：
     令牌层（本文件）            → 只定义变量，不写组件选择器
     组件层（theme-components.css）→ 只做 Bootstrap 组件覆盖与全局基础元素
     页面层（各模板内联 <style>） → 本轮不动

   加载位置：Bootstrap 之后、页面级样式之前（见 templates/base.html）。
   ============================================================ */

:root {
    /* ---------------- 品牌与语义色 ---------------- */
    --app-primary: #5f5ce6;                     /* 主色（靛紫） */
    --app-primary-2: #7871ff;                   /* 主色亮阶 */
    --app-primary-ink: #4a47c9;                 /* 主色墨（浅色主底上的文字）：#efeeff 底 6.0:1、#e4e2ff 底 5.5:1、#dcd9ff 底 5.1:1，满足 WCAG AA */
    --app-primary-rgb: 95, 92, 230;             /* 主色 RGB 分量，供 rgba() 复用 */
    --app-primary-soft: #efeeff;                /* 主色浅底（浅色主按钮） */
    --app-primary-soft-hover: #e4e2ff;          /* 主色浅底 · 悬停 */
    --app-primary-soft-active: #dcd9ff;         /* 主色浅底 · 按下 */
    --app-primary-soft-border: rgba(95, 92, 230, .12);
    --app-primary-active: #4f4ccf;              /* 主色实心 · 按下 */
    --app-primary-subtle: #e7efff;              /* 主色极浅底（菜单选中） */

    --app-success: #2eb85c;
    --app-success-rgb: 46, 184, 92;
    --app-warning: #ffb020;
    --app-warning-rgb: 255, 176, 32;
    --app-danger: #ff5f57;
    --app-danger-rgb: 255, 95, 87;
    --app-danger-solid: #d5342c;                /* 实心危险按钮底色（白字 4.8:1，满足 WCAG AA） */
    --app-danger-solid-hover: #c62f28;          /* 实心危险按钮底色 · 悬停（白字 5.5:1） */

    /* ---------------- 组件层语义色（由上方语义色派生，供状态标签 / 提示使用） ---------------- */
    --ui-success-soft: rgba(var(--app-success-rgb), .12);
    --ui-success-line: rgba(var(--app-success-rgb), .26);
    --ui-success-ink: color-mix(in srgb, var(--app-success) 58%, var(--app-text));

    --ui-warning-soft: rgba(var(--app-warning-rgb), .16);
    --ui-warning-line: rgba(var(--app-warning-rgb), .34);
    --ui-warning-ink: color-mix(in srgb, var(--app-warning) 45%, var(--app-text));

    --ui-danger-soft: rgba(var(--app-danger-rgb), .12);
    --ui-danger-line: rgba(var(--app-danger-rgb), .26);
    --ui-danger-ink: color-mix(in srgb, var(--app-danger) 58%, var(--app-text));

    /* info 归入主色体系（底/描边取主色）：文字与其他语义色同样向主文字压深，保证浅底可读 */
    --ui-info-soft: var(--app-primary-soft);
    --ui-info-line: var(--app-primary-soft-border);
    --ui-info-ink: color-mix(in srgb, var(--app-primary) 78%, var(--app-text));

    --ui-neutral-soft: rgba(20, 23, 28, .05);
    --ui-neutral-line: var(--app-border-strong);
    --ui-neutral-ink: var(--app-text-secondary);

    /* ---------------- 表面与文字 ---------------- */
    --app-bg: #f3f4f7;                          /* 页面底色（冷灰，非纯白） */
    --app-card: #ffffff;                        /* 卡片底色 */
    --app-panel: rgba(252, 253, 255, .98);      /* 面板 / 浮层 */
    --app-text: #1a1b1f;                        /* 主文字（不使用纯黑） */
    --app-text-secondary: #4a5261;              /* 次级文字（白底 7.9:1，满足 AA） */
    --app-muted: #646b78;                       /* 次要 / 占位文字（白底 5.4:1，满足 AA） */

    /* ---------------- 描边与投影 ---------------- */
    --app-border: rgba(20, 23, 28, .05);        /* 极浅描边（卡片 / 容器） */
    --app-border-strong: #d5dae3;               /* 需可见的描边（次级按钮 / 卡片内分隔） */
    --app-border-field: #828a9b;                /* 表单控件描边：白底 3.5:1、灰底 3.2:1，满足 WCAG 1.4.11（非文本对比 3:1） */
    --app-border-row: rgba(20, 23, 28, .12);    /* 列表行分割线（白底 ≈ #e3e3e4 / 1.28:1）：比 --app-border 可见、比 --app-border-strong 轻 */
    --app-divider: rgba(20, 23, 28, .06);       /* 分隔线 */
    --app-shadow: 0 8px 24px rgba(31, 36, 53, .04);       /* 通用极淡投影 */
    --app-shadow-card: 0 6px 16px rgba(25, 27, 53, .03);  /* 卡片投影 */
    --app-shadow-pop: 0 12px 32px rgba(25, 27, 53, .08);  /* 浮层投影 */

    /* ---------------- 圆角 ---------------- */
    --app-radius-card: 12px;
    --app-radius-btn: 8px;
    --app-radius-btn-lg: 10px;
    --app-radius-input: 8px;
    --app-radius-menu: 5px;
    --app-radius-sm: 6px;
    --app-radius-pill: 999px;

    /* ---------------- 渐变 ---------------- */
    --app-gradient-brand: linear-gradient(135deg, #7b61ff, #5b5ce6);  /* 品牌胶囊 / Logo */
    --app-gradient-tab: linear-gradient(#4f6fff, #1f5eff);            /* 页签选中态 */

    /* ---------------- 字体 ---------------- */
    --app-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, "Noto Sans", "PingFang SC", "Microsoft YaHei",
        sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    --app-font-size-base: 15px;                 /* 正文基线（低于 Bootstrap 默认 16px） */
    --app-font-size-sm: 13px;
    --app-font-size-xs: 12px;

    /* ============================================================
       Bootstrap 变量映射

       注意 1：Bootstrap 5 的 --bs-primary 并不会驱动 .btn-primary / .badge / .alert
               等组件——这些组件的主色是 SCSS 编译期写死的 #0d6efd。
               因此组件主色统一在 theme-components.css 中显式覆盖；
               此处仅统一「全局底色 / 文字 / 描边 / 圆角 / 字体 / 链接色」。

       注意 2：刻意不改 --bs-root-font-size（保持 html 为 16px），
               否则 Bootstrap 全部 rem 间距会被整体缩放，布局风险过大。
               正文 15px 通过 --bs-body-font-size 实现，只影响 body 继承链。
       ============================================================ */
    --bs-body-bg: var(--app-bg);
    --bs-body-color: var(--app-text);
    --bs-body-font-family: var(--app-font-sans);
    --bs-body-font-size: var(--app-font-size-base);
    --bs-font-sans-serif: var(--app-font-sans);

    --bs-border-color: var(--app-border-strong);
    --bs-border-color-translucent: var(--app-border);
    --bs-secondary-color: var(--app-muted);
    --bs-emphasis-color: var(--app-text);

    --bs-border-radius: var(--app-radius-input);
    --bs-border-radius-sm: var(--app-radius-sm);
    --bs-border-radius-lg: var(--app-radius-btn-lg);
    --bs-border-radius-xl: var(--app-radius-card);
    --bs-border-radius-xxl: var(--app-radius-card);
    --bs-border-radius-pill: var(--app-radius-pill);

    --bs-primary: var(--app-primary);
    --bs-primary-rgb: var(--app-primary-rgb);
    --bs-primary-text-emphasis: var(--app-primary-ink);
    --bs-primary-bg-subtle: var(--app-primary-soft);
    --bs-primary-border-subtle: var(--app-primary-soft-border);

    --bs-link-color: var(--app-primary);
    --bs-link-color-rgb: var(--app-primary-rgb);
    --bs-link-hover-color: var(--app-primary-active);
    --bs-link-hover-color-rgb: var(--app-primary-rgb);

    --bs-focus-ring-color: rgba(var(--app-primary-rgb), .2);
}