/* ============================================================================
   HWS 统一皮肤 · warm 暖绒（默认皮肤 / 现状锚点）
   性格：奶油纸 + 腮红 + 青玉，圆润、柔和阴影，可可爱爱但不幼稚。
   来源：现网 home.css（2026-11-05 暖绒重设计，评审 9.2/9.2 冻结）
        + 西小宝 App XiaobanDesign/Tokens.swift（同一套暖绒 palette）。
   规则：本文件只写皮肤选择器与变量值，不写组件样式；所有颜色为不透明 sRGB hex，
        阴影是唯一允许半透明的地方。真源：design/hws-assets/tokens.json（v4）。
   深色：P2（尽力而为，尚未进本轮视觉验收闸门）。
   注意：--hws-color-scrim 是不透明底色，遮罩层请用
        background: color-mix(in srgb, var(--hws-color-scrim) 42%, transparent)
        不要直接当纯色铺满。
   ========================================================================== */

/* ---------- 浅色 ---------- */
html[data-skin="warm"] {
    /* 1. 语义颜色（21 键必须给全） */
    --hws-color-canvas: #FBF4EA;      /* 奶茶纸页面底 */
    --hws-color-surface: #FFFDF9;     /* 暖白工作面：卡片/面板/输入 */
    --hws-color-surface-soft: #F5E8D6;/* 奶油次级填充：次按钮/建议条/页脚 */
    --hws-color-surface-sunk: #F0E0CC;/* 更沉的奶油：列表 hover/内嵌块 */
    --hws-color-ink: #3B2A22;         /* 可可墨水标题。surface 系 13.42:1 */
    --hws-color-text: #6A5246;        /* 正文。surface 7.11:1 / canvas 6.61:1 */
    --hws-color-muted: #7F6658;       /* 说明/时间。surface 5.24:1 / canvas 4.88:1 */
    --hws-color-line: #EADBC8;        /* 暖分隔线（仅可见，不刺眼） */
    --hws-color-line-strong: #D6BF9F; /* 强分隔/描边 */
    --hws-color-accent: #9ED3BE;      /* 青玉实底主操作（配可可字 8.13:1） */
    --hws-color-accent-deep: #2F6B55; /* 深青玉：链接/强调文字 6.16:1 */
    --hws-color-accent-soft: #E3F2EA; /* 选中浅底/浅强调面 */
    --hws-color-on-accent: #3B2A22;   /* 主操作前景（可可字，不用白字） */
    --hws-color-agent: #A85D4A;       /* AI 助理身份色（第二强调） */
    --hws-color-tint-1: #FAD0C7;      /* 腮红：装饰/识别块，不承载正文 */
    --hws-color-tint-2: #FBC9C0;      /* 背景粉：装饰/识别块，不承载正文 */
    --hws-color-success: #2F6B4F;
    --hws-color-warning: #7A5217;
    --hws-color-danger: #A3403B;
    --hws-color-focus: #2F6B55;       /* 焦点环（配 3px offset 使用） */
    --hws-color-scrim: #3B2A22;       /* 不透明遮罩底色，见文件头用法 */

    /* 2. 圆角：贴合首页 22/18/14/28 的暖绒几何 */
    --hws-radius-xs: 8px;
    --hws-radius-sm: 14px;
    --hws-radius-md: 18px;
    --hws-radius-lg: 22px;
    --hws-radius-xl: 28px;
    --hws-radius-pill: 999px;

    /* 3. 阴影：可可棕、宽而淡、两层叠（与 home.css 的 card/lift/soft 同源） */
    --hws-shadow-1: 0 1px 3px rgb(59 42 34 / 4%), 0 10px 24px rgb(59 42 34 / 7%);
    --hws-shadow-2: 0 2px 8px rgb(59 42 34 / 4%), 0 22px 48px rgb(59 42 34 / 10%);
    --hws-shadow-3: 0 3px 10px rgb(59 42 34 / 5%), 0 30px 64px rgb(59 42 34 / 13%);

    /* 4. 字体与字号阶 */
    --hws-font-sans: "PingFang SC", "Noto Sans SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
    --hws-font-round: ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN", "PingFang SC", "Noto Sans SC", sans-serif;
    --hws-text-scale: 1;

    /* 5. 组件形状/密度（hws-tokens.css §5 的皮肤落点） */
    --hws-button-radius: var(--hws-radius-pill);
    --hws-card-radius: var(--hws-radius-lg);
    --hws-panel-radius: var(--hws-radius-xl);
    --hws-control-radius: var(--hws-radius-sm);
    --hws-nav-radius: var(--hws-radius-pill);
    --hws-card-border: 1px solid transparent;
    --hws-card-shadow: var(--hws-shadow-1);
    --hws-card-shadow-hover: var(--hws-shadow-2);
    --hws-panel-border: 1px solid transparent;
    --hws-panel-shadow: var(--hws-shadow-2);
    --hws-row-height: 44px;
    --hws-density: 1;
    --hws-heading-weight: 700;
    --hws-letter-spacing-title: -0.02em;
}

/* ---------- 深色（P2：未进本轮验收闸门） ---------- */
html[data-skin="warm"][data-theme="dark"] {
    --hws-color-canvas: #241B17;
    --hws-color-surface: #2E231E;
    --hws-color-surface-soft: #3A2C25;
    --hws-color-surface-sunk: #32251F;
    --hws-color-ink: #FBF1E4;
    --hws-color-text: #E2D0BF;
    --hws-color-muted: #BBA594;
    --hws-color-line: #4A3A31;
    --hws-color-line-strong: #5C483D;
    --hws-color-accent: #9ED3BE;
    --hws-color-accent-deep: #A9DCC8;
    --hws-color-accent-soft: #33473E;
    --hws-color-on-accent: #241B17;
    --hws-color-agent: #E0A88F;
    --hws-color-tint-1: #5A3A32;
    --hws-color-tint-2: #4E302B;
    --hws-color-success: #7FC9A6;
    --hws-color-warning: #E5B267;
    --hws-color-danger: #E8908A;
    --hws-color-focus: #9ED3BE;
    --hws-color-scrim: #000000;

    --hws-radius-xs: 8px;
    --hws-radius-sm: 14px;
    --hws-radius-md: 18px;
    --hws-radius-lg: 22px;
    --hws-radius-xl: 28px;
    --hws-radius-pill: 999px;

    --hws-shadow-1: 0 1px 3px rgb(0 0 0 / 20%), 0 10px 24px rgb(0 0 0 / 16%);
    --hws-shadow-2: 0 2px 8px rgb(0 0 0 / 22%), 0 22px 48px rgb(0 0 0 / 26%);
    --hws-shadow-3: 0 3px 10px rgb(0 0 0 / 26%), 0 30px 64px rgb(0 0 0 / 38%);

    --hws-font-sans: "PingFang SC", "Noto Sans SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
    --hws-font-round: ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN", "PingFang SC", "Noto Sans SC", sans-serif;
    --hws-text-scale: 1;

    --hws-button-radius: var(--hws-radius-pill);
    --hws-card-radius: var(--hws-radius-lg);
    --hws-panel-radius: var(--hws-radius-xl);
    --hws-control-radius: var(--hws-radius-sm);
    --hws-nav-radius: var(--hws-radius-pill);
    --hws-card-border: 1px solid transparent;
    --hws-card-shadow: var(--hws-shadow-1);
    --hws-card-shadow-hover: var(--hws-shadow-2);
    --hws-panel-border: 1px solid transparent;
    --hws-panel-shadow: var(--hws-shadow-2);
    --hws-row-height: 44px;
    --hws-density: 1;
    --hws-heading-weight: 700;
    --hws-letter-spacing-title: -0.02em;
}

/* ---------- 兜底：JS 关闭 / 首帧未写 data-skin 时按 warm 渲染（值 = 浅色 warm） ---------- */
html:not([data-skin]) {
    --hws-color-canvas: #FBF4EA;
    --hws-color-surface: #FFFDF9;
    --hws-color-surface-soft: #F5E8D6;
    --hws-color-surface-sunk: #F0E0CC;
    --hws-color-ink: #3B2A22;
    --hws-color-text: #6A5246;
    --hws-color-muted: #7F6658;
    --hws-color-line: #EADBC8;
    --hws-color-line-strong: #D6BF9F;
    --hws-color-accent: #9ED3BE;
    --hws-color-accent-deep: #2F6B55;
    --hws-color-accent-soft: #E3F2EA;
    --hws-color-on-accent: #3B2A22;
    --hws-color-agent: #A85D4A;
    --hws-color-tint-1: #FAD0C7;
    --hws-color-tint-2: #FBC9C0;
    --hws-color-success: #2F6B4F;
    --hws-color-warning: #7A5217;
    --hws-color-danger: #A3403B;
    --hws-color-focus: #2F6B55;
    --hws-color-scrim: #3B2A22;

    --hws-radius-xs: 8px;
    --hws-radius-sm: 14px;
    --hws-radius-md: 18px;
    --hws-radius-lg: 22px;
    --hws-radius-xl: 28px;
    --hws-radius-pill: 999px;

    --hws-shadow-1: 0 1px 3px rgb(59 42 34 / 4%), 0 10px 24px rgb(59 42 34 / 7%);
    --hws-shadow-2: 0 2px 8px rgb(59 42 34 / 4%), 0 22px 48px rgb(59 42 34 / 10%);
    --hws-shadow-3: 0 3px 10px rgb(59 42 34 / 5%), 0 30px 64px rgb(59 42 34 / 13%);

    --hws-font-sans: "PingFang SC", "Noto Sans SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
    --hws-font-round: ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN", "PingFang SC", "Noto Sans SC", sans-serif;
    --hws-text-scale: 1;

    --hws-button-radius: var(--hws-radius-pill);
    --hws-card-radius: var(--hws-radius-lg);
    --hws-panel-radius: var(--hws-radius-xl);
    --hws-control-radius: var(--hws-radius-sm);
    --hws-nav-radius: var(--hws-radius-pill);
    --hws-card-border: 1px solid transparent;
    --hws-card-shadow: var(--hws-shadow-1);
    --hws-card-shadow-hover: var(--hws-shadow-2);
    --hws-panel-border: 1px solid transparent;
    --hws-panel-shadow: var(--hws-shadow-2);
    --hws-row-height: 44px;
    --hws-density: 1;
    --hws-heading-weight: 700;
    --hws-letter-spacing-title: -0.02em;
}

/* ---------- 兜底 · 深色：没有 data-skin 但已由 portal-theme.js 写了 data-theme 时 ---------- */
html:not([data-skin])[data-theme="dark"] {
    --hws-color-canvas: #241B17;
    --hws-color-surface: #2E231E;
    --hws-color-surface-soft: #3A2C25;
    --hws-color-surface-sunk: #32251F;
    --hws-color-ink: #FBF1E4;
    --hws-color-text: #E2D0BF;
    --hws-color-muted: #BBA594;
    --hws-color-line: #4A3A31;
    --hws-color-line-strong: #5C483D;
    --hws-color-accent: #9ED3BE;
    --hws-color-accent-deep: #A9DCC8;
    --hws-color-accent-soft: #33473E;
    --hws-color-on-accent: #241B17;
    --hws-color-agent: #E0A88F;
    --hws-color-tint-1: #5A3A32;
    --hws-color-tint-2: #4E302B;
    --hws-color-success: #7FC9A6;
    --hws-color-warning: #E5B267;
    --hws-color-danger: #E8908A;
    --hws-color-focus: #9ED3BE;
    --hws-color-scrim: #000000;

    --hws-radius-xs: 8px;
    --hws-radius-sm: 14px;
    --hws-radius-md: 18px;
    --hws-radius-lg: 22px;
    --hws-radius-xl: 28px;
    --hws-radius-pill: 999px;

    --hws-shadow-1: 0 1px 3px rgb(0 0 0 / 20%), 0 10px 24px rgb(0 0 0 / 16%);
    --hws-shadow-2: 0 2px 8px rgb(0 0 0 / 22%), 0 22px 48px rgb(0 0 0 / 26%);
    --hws-shadow-3: 0 3px 10px rgb(0 0 0 / 26%), 0 30px 64px rgb(0 0 0 / 38%);

    --hws-font-sans: "PingFang SC", "Noto Sans SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
    --hws-font-round: ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN", "PingFang SC", "Noto Sans SC", sans-serif;
    --hws-text-scale: 1;

    --hws-button-radius: var(--hws-radius-pill);
    --hws-card-radius: var(--hws-radius-lg);
    --hws-panel-radius: var(--hws-radius-xl);
    --hws-control-radius: var(--hws-radius-sm);
    --hws-nav-radius: var(--hws-radius-pill);
    --hws-card-border: 1px solid transparent;
    --hws-card-shadow: var(--hws-shadow-1);
    --hws-card-shadow-hover: var(--hws-shadow-2);
    --hws-panel-border: 1px solid transparent;
    --hws-panel-shadow: var(--hws-shadow-2);
    --hws-row-height: 44px;
    --hws-density: 1;
    --hws-heading-weight: 700;
    --hws-letter-spacing-title: -0.02em;
}

/* ---------- 切换器预览色块（固定色，不随当前皮肤变化） ----------
   来源 BRIEF §9：外观弹层里三张缩略卡必须永远显示各皮肤自己的颜色，
   因此这里用 data-skin-key 锁定，不能引用当前皮肤的语义令牌。 */
.hws-skin-swatch[data-skin-key="warm"] i:nth-child(1) { background: #FBF4EA; }
.hws-skin-swatch[data-skin-key="warm"] i:nth-child(2) { background: #FFFDF9; }
.hws-skin-swatch[data-skin-key="warm"] i:nth-child(3) { background: #9ED3BE; }
.hws-skin-swatch[data-skin-key="warm"] i:nth-child(4) { background: #FAD0C7; }