/**
 * 主站门户 — UI规范样式表（www-portal-ui-spec.css）
 *
 * 集中存放共性 UI：组件结构、色彩、表单、按钮等可复用样式，与 {@see www-public-layout.css} 等入口样式配合使用，
 * 便于研发快速引用统一变量与模式。后续可在本文件按「规范条目 N」追加按钮、卡片、表单等块。
 *
 * 加载顺序：在 www-public-layout.css 之后引入（布局壳内已 link），以便复用其中 :root 令牌。
 */

/* ==========================================================================
   规范条目 1 — 设计令牌语义别名（色彩 / 圆角 / 字体）
   ==========================================================================
 * 基础色板与版心变量定义见 www-public-layout.css 的 :root（--www-color-*、--www-radius-* 等）。
 * 此处提供 --www-ui-* 语义别名，业务页与后续规范条目优先使用下列名称，避免散落硬编码。
 * ========================================================================== */

:root {
    --www-ui-color-bg: var(--www-color-bg);
    --www-ui-color-surface: var(--www-color-surface);
    --www-ui-color-elevated: var(--www-color-elevated);
    --www-ui-color-text: var(--www-color-text);
    --www-ui-color-muted: var(--www-color-muted);
    --www-ui-color-accent: var(--www-color-accent);
    --www-ui-color-accent-2: var(--www-color-accent-2);
    --www-ui-color-accent-hover: var(--www-color-accent-hover);
    --www-ui-font-sans: var(--www-font);
    --www-ui-font-serif: var(--www-font-serif);
    --www-ui-radius-lg: var(--www-radius-lg);
    --www-ui-shadow-soft: var(--www-shadow-soft);

    /* 规范条目 2 — 辅助按钮（非提交）淡色底与边框，见下方 .www-btn--quiet */
    --www-ui-btn-quiet-bg: color-mix(in srgb, var(--www-color-surface) 88%, transparent);
    --www-ui-btn-quiet-bg-hover: color-mix(in srgb, var(--www-color-text) 9%, transparent);
    --www-ui-btn-quiet-border: color-mix(in srgb, var(--www-color-text) 14%, transparent);
    --www-ui-btn-quiet-border-hover: color-mix(in srgb, var(--www-color-accent) 42%, transparent);
}

/* ==========================================================================
   规范条目 2 — 辅助按钮（非提交）：.www-btn--quiet，兼容 .www-btn--secondary
   ==========================================================================
 * 用途：type="button" 且不提交整单的操作——换一张图形码、发动态码/OTP、行内「验证」、弹窗内重发 等。
 * 视觉：不用主按钮渐变与高阴影；字色偏 muted，底与边框弱对比；悬停略提亮，仍弱于主提交（.www-btn）。
 * 主提交：整单 type="submit" 仍用 .www-btn（渐变实心）。
 * 兼容：历史类名 .www-btn--secondary 与本条同形，新代码优先写 .www-btn--quiet。
 * ========================================================================== */

.www-btn--quiet,
.www-btn--secondary {
    background: var(--www-ui-btn-quiet-bg);
    color: var(--www-ui-color-muted);
    border: 1px solid var(--www-ui-btn-quiet-border);
    box-shadow: none;
    font-weight: 500;
}

.www-btn--quiet:hover,
.www-btn--secondary:hover {
    filter: none;
    color: var(--www-ui-color-text);
    border-color: var(--www-ui-btn-quiet-border-hover);
    background: var(--www-ui-btn-quiet-bg-hover);
}

.www-btn--quiet:focus-visible,
.www-btn--secondary:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--www-ui-color-accent) 55%, transparent);
    outline-offset: 2px;
}

.www-btn--quiet:disabled,
.www-btn--secondary:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}