/* ============================================================================
   HWS 统一皮肤体系 1.0 —— 语义令牌契约（运行时投影）
   真源：design/hws-assets/tokens.json（v4，含三套皮肤）。
   规则：
     1. 组件只允许引用 --hws-* 语义变量或本文件末尾的历史别名，禁止新写 hex。
     2. 皮肤取值只在 skin-warm.css / skin-air.css / skin-paper.css 里定义；
        本文件不含任何调色板（含兜底皮肤）。
     3. 三份 skin 文件在所有页面都加载，靠 html[data-skin] 选择，切换不重载页面。
     4. CSP 是 style-src 'self'：样式只能落 .css 文件，禁止内联 style 属性。
   加载顺序（所有页面一致）：
     site.css → 页面自有 CSS → 服务 CSS(portal-*.css) → portal-shell.css
     → hws-tokens.css → skin-*.css → hws-bridge.css → hws-views.css
     → hws-drive.css → hws-surface.css
   ========================================================================== */

/* ---------- 1. 尺度令牌（与皮肤无关的骨架；皮肤可覆盖） ---------- */
:root {
    /* 间距：8px 网格，4 为半格 */
    --hws-space-1: 4px;
    --hws-space-2: 8px;
    --hws-space-3: 12px;
    --hws-space-4: 16px;
    --hws-space-5: 24px;
    --hws-space-6: 32px;
    --hws-space-7: 48px;
    --hws-space-8: 64px;

    /* 圆角 */
    --hws-radius-xs: 6px;
    --hws-radius-sm: 10px;
    --hws-radius-md: 14px;
    --hws-radius-lg: 20px;
    --hws-radius-xl: 28px;
    --hws-radius-pill: 999px;

    /* 阴影（暖色默认；冷色皮肤会覆盖成中性灰阴影） */
    --hws-shadow-1: 0 1px 2px rgb(59 42 34 / 6%), 0 2px 6px rgb(59 42 34 / 5%);
    --hws-shadow-2: 0 2px 8px rgb(59 42 34 / 5%), 0 14px 32px rgb(59 42 34 / 9%);
    --hws-shadow-3: 0 6px 20px rgb(59 42 34 / 8%), 0 30px 64px rgb(59 42 34 / 14%);

    /* 排版 */
    --hws-font-sans: "PingFang SC", "Noto Sans SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
    --hws-font-round: "SF Pro Rounded", "Hiragino Maru Gothic ProN", "PingFang SC", "Noto Sans SC", system-ui, sans-serif;
    --hws-font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

    /* 字号阶（skin 可整体缩放 → 调 --hws-text-scale） */
    --hws-text-scale: 1;
    --hws-text-display: calc(40px * var(--hws-text-scale));
    --hws-text-h1: calc(30px * var(--hws-text-scale));
    --hws-text-h2: calc(22px * var(--hws-text-scale));
    --hws-text-h3: calc(17px * var(--hws-text-scale));
    --hws-text-body: calc(15px * var(--hws-text-scale));
    --hws-text-small: calc(13px * var(--hws-text-scale));
    --hws-text-tiny: calc(12px * var(--hws-text-scale));

    /* 动效 */
    --hws-dur-fast: 140ms;
    --hws-dur-base: 220ms;
    --hws-dur-slow: 360ms;
    --hws-ease: cubic-bezier(0.2, 0.8, 0.2, 1);

    /* 布局 */
    --hws-content-max: 1240px;
    --hws-content-wide: 1680px;
    --hws-page-gutter: clamp(20px, 4vw, 48px);
    --hws-control-height: 40px;
    --hws-tap-min: 44px;

    /* 焦点环 */
    --hws-focus-ring: 2px;
    --hws-focus-offset: 3px;
}

/* ---------- 2. 历史别名 → 语义令牌（一次性兼容层） ----------
   作用：让 site.css / home.css / portal-*.css / drive 里
   「已存在的 var() 引用」自动跟随皮肤，无需重写老 CSS。
   本文件在 site.css / home.css 之后加载，用 :root 靠层叠顺序压过它们的 :root；
   私有命名空间（--mail-* / --cal-* / drive）由 hws-bridge.css 用 html[data-skin] 前缀压过。 */
:root {
    /* — site.css / portal-news.css 的 --hws-* 与旧语义名 — */
    --hws-desktop: var(--hws-color-accent);
    --hws-desktop-deep: var(--hws-color-accent-deep);
    --hws-agent: var(--hws-color-agent);
    --hws-model: var(--hws-color-success);
    --hws-token: var(--hws-color-warning);
    --hws-ink: var(--hws-color-ink);
    --hws-text: var(--hws-color-text);
    --hws-muted: var(--hws-color-muted);
    --hws-border: var(--hws-color-line);
    --hws-surface: var(--hws-color-canvas);
    --hws-raised: var(--hws-color-surface);

    --ink: var(--hws-color-ink);
    --text: var(--hws-color-text);
    --muted: var(--hws-color-muted);
    --line: var(--hws-color-line-strong);
    --line-soft: var(--hws-color-line);
    --paper: var(--hws-color-surface);
    --canvas: var(--hws-color-canvas);
    --blue: var(--hws-color-accent);
    --blue-deep: var(--hws-color-accent-deep);
    --cyan: var(--hws-color-agent);
    --success: var(--hws-color-success);
    --warning: var(--hws-color-warning);
    --danger: var(--hws-color-danger);
    --shadow: var(--hws-shadow-2);
    --font-sans: var(--hws-font-sans);
    --font-round: var(--hws-font-round);
    --font-mono: var(--hws-font-mono);

    /* — home.css（暖绒首页）的旧语义名 — */
    --surface: var(--hws-color-surface);
    --surface-warm: var(--hws-color-surface-soft);
    --surface-warm-deep: var(--hws-color-surface-sunk);
    --blush: var(--hws-color-tint-1);
    --pink: var(--hws-color-tint-2);
    --blush-soft: color-mix(in srgb, var(--hws-color-tint-1) 52%, var(--hws-color-surface));
    --pink-soft: color-mix(in srgb, var(--hws-color-tint-2) 48%, var(--hws-color-surface));
    --action: var(--hws-color-accent);
    /* 按下态：仍以 accent 为底，压深一档但要保住 on-accent 的对比度。
       直接映射 accent-deep 会让「深底 + 深色字」只有 2.18:1（2026-11-07 评审发现）。 */
    --action-pressed: color-mix(in srgb, var(--hws-color-accent) 84%, var(--hws-color-ink));
    --selected-fill: var(--hws-color-accent-soft);
    --text2: var(--hws-color-text);
    --text2-on-tint: var(--hws-color-text);
    --jade-deep: var(--hws-color-accent-deep);
    --separator: var(--hws-color-line);
    --ease-soft: var(--hws-ease);
    --radius-hero: var(--hws-radius-xl);
    --radius-card: var(--hws-radius-lg);
    --radius-tile: var(--hws-radius-md);
    --radius-chip: var(--hws-radius-sm);
    --radius-pill: var(--hws-radius-pill);
    --shadow-card: var(--hws-shadow-2);
    --shadow-lift: var(--hws-shadow-3);
    --shadow-soft: var(--hws-shadow-1);
    --shadow-bead: 0 2px 6px color-mix(in srgb, var(--hws-color-accent-deep) 18%, transparent), 0 10px 22px color-mix(in srgb, var(--hws-color-accent-deep) 14%, transparent);
}

/* ---------- 3. 语义令牌清单（皮肤必须给全的键） ----------
   颜色：canvas / surface / surface-soft / surface-sunk / ink / text / muted /
         line / line-strong / accent / accent-deep / accent-soft / on-accent /
         agent / tint-1 / tint-2 / success / warning / danger / focus / scrim
   皮肤可覆盖尺度：radius-* / shadow-1..3 / font-sans / font-round / text-scale
   ------------------------------------------------------------------------ */

/* ---------- 4. 全局基础 ---------- */
html { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }
body {
    background: var(--hws-color-canvas);
    font-family: var(--hws-font-sans);
}
/* 正文颜色交给页面自己的基础样式：首页 home.css 用 ink、Portal 用 text。
   本文件不全局写 color —— 2026-11-07 回归：全局 body{color:text} 加载在 home.css 之后，
   把首页标题从可可墨 #3B2A22 盖成 #6A5246。 */
.portal-page { color: var(--hws-color-text); }
:is(a, button, summary, [tabindex]):focus-visible {
    outline: var(--hws-focus-ring) solid var(--hws-color-focus);
    outline-offset: var(--hws-focus-offset);
    border-radius: var(--hws-radius-xs);
}
::selection { background: var(--hws-color-accent-soft); color: var(--hws-color-ink); }
html:not([data-skin]) body { transition: background-color var(--hws-dur-base) var(--hws-ease); }
body { transition: background-color var(--hws-dur-base) var(--hws-ease), color var(--hws-dur-base) var(--hws-ease); }
@media (prefers-reduced-motion: reduce) {
    body, * { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}

/* ---------- 5. 形状/密度令牌（皮肤个性的主要落点） ----------
   颜色之外，皮肤之间的「圆润 vs 克制」靠这几个键区分：
     按钮圆角、卡片圆角、卡片描边、卡片阴影、控件高度、内容密度。
   皮肤文件覆盖它们即可，组件层只读这些键。 */
:root {
    --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;                 /* 行高/内边距统一乘数：紧凑皮肤 0.94，宽松皮肤 1.05 */
    --hws-heading-weight: 650;
    --hws-letter-spacing-title: -0.02em;
}