/* Shared presentation tokens for the frontend and standalone authentication. */
:root {
    /* ✨ 核心色彩系统 - 墨玉青 (Jade Teal) 品牌调
       主色三个实色档位对白文字对比度均 ≥ 5:1（bg 5.2 / end 5.7 / hover 7.1），
       且任意两档之间的 sRGB 插值对比度不低于端点最小值，满足主题色契约测试。 */
    --uap-primary: #0e7a6d;
    --uap-primary-hover: #0b6359;
    --uap-action-bg: #0e7a6d;
    --uap-action-end: #0c7364;
    --uap-action-hover: #0b6359;
    --uap-primary-active: #095048;
    --uap-primary-light: #d3ece5;
    --uap-primary-rgb: 14, 122, 109;
    --uap-primary-alpha: rgba(var(--uap-primary-rgb), 0.1);
    --uap-primary-alpha-strong: rgba(var(--uap-primary-rgb), 0.18);
    --uap-primary-glow: rgba(var(--uap-primary-rgb), 0.35);
    --uap-primary-gradient: #3aa08c;
    --uap-gradient-primary: linear-gradient(135deg, var(--uap-action-bg), var(--uap-action-end));
    --uap-primary-gradient-subtle: linear-gradient(180deg, rgba(var(--uap-primary-rgb), 0.08) 0%, rgba(var(--uap-primary-rgb), 0.01) 100%);
    --uap-primary-bg: #e9f4f0;
    --uap-cover-start: #083f39;
    --uap-cover-end: #2fa08b;

    /* 🏅 点缀色 - 落款金：徽章、会员、赞赏与价格专属，仅小面积使用 */
    --uap-accent: #b3872c;
    --uap-accent-rgb: 179, 135, 44;
    --uap-accent-strong: #8a651c;
    --uap-accent-bg: #faf3e3;

    /* 🎨 功能与状态色 */
    --uap-success: #059669;
    --uap-success-rgb: 5, 150, 105;
    --uap-success-bg: #ecfdf5;
    --uap-success-glow: rgba(5, 150, 105, 0.25);
    --uap-error: #e11d48;
    --uap-error-rgb: 225, 29, 72;
    --uap-error-bg: #fff1f2;
    --uap-error-glow: rgba(225, 29, 72, 0.25);
    --uap-warning: #d97706;
    --uap-warning-rgb: 217, 119, 6;
    --uap-warning-bg: #fffbeb;

    /* 🌑 中性色彩 - 暖纸画布 (Warm Paper) */
    --uap-border: #e8e5df;
    --uap-border-hover: #a3a099;
    --uap-border-subtle: rgba(28, 25, 23, 0.08);
    --uap-border-light: #f2f0ea;
    --uap-border-glass: rgba(255, 255, 255, 0.6);
    --uap-text: #1c1917;
    --uap-text-muted: #57534b;
    --uap-text-secondary: var(--uap-text-light);
    --uap-text-light: #78716a;
    --uap-bg: #faf9f7;
    --uap-surface: #ffffff;
    --uap-surface-hover: #f5f3ef;
    --uap-glass: rgba(255, 255, 255, 0.82);
    --uap-glass-card: rgba(255, 255, 255, 0.92);

    /* 📐 形态规则 - 现代平滑圆角系统 */
    --uap-radius-xs: 6px;
    --uap-radius-sm: 8px;
    --uap-radius-md: 12px;
    --uap-radius: 14px;
    --uap-radius-lg: 18px;
    --uap-radius-xl: 24px;
    --uap-radius-full: 9999px;

    /* 🪄 现代多阶漫反射环境光影层级 (Ambient Elevations) */
    --uap-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
    --uap-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px -1px rgba(15, 23, 42, 0.06);
    --uap-shadow: 0 4px 12px -2px rgba(15, 23, 42, 0.06), 0 2px 6px -1px rgba(15, 23, 42, 0.04);
    --uap-shadow-md: 0 12px 24px -4px rgba(15, 23, 42, 0.08), 0 4px 12px -2px rgba(15, 23, 42, 0.04);
    --uap-shadow-lg: 0 20px 32px -6px rgba(15, 23, 42, 0.1), 0 8px 16px -4px rgba(15, 23, 42, 0.05);
    --uap-shadow-xl: 0 32px 64px -12px rgba(15, 23, 42, 0.14);
    --uap-shadow-glow: 0 0 24px -2px var(--uap-primary-glow);
    --uap-shadow-glow-subtle: 0 8px 20px -4px rgba(var(--uap-primary-rgb), 0.22);
    --uap-inner-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 -1px 0 rgba(0, 0, 0, 0.04);

    /* ⚡ 触感级微交互动效与物理弹性 */
    --uap-transition-fast: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
    --uap-transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    --uap-transition-bounce: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

    /* 🔤 现代排版与等宽数字特性（中文落系统高分屏黑体系） */
    --uap-font-family: 'Inter', 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "HarmonyOS Sans SC", "Source Han Sans SC", "Noto Sans SC", "Microsoft YaHei", Roboto, "Helvetica Neue", Arial, sans-serif;
    --uap-font-features: "cv02", "cv03", "cv04", "cv11", "tnum";
}

/* 🌙 暗色令牌基座：仅在 html 带 .uap-dark 时生效。
   frontend.css 尚有约 90 处硬编码浅色面未完成浏览器审查与清扫，
   因此当前不绑定 prefers-color-scheme，避免半成品暗色上线。 */
html.uap-dark {
    color-scheme: dark;
    --uap-border: #37332d;
    --uap-border-hover: #57524a;
    --uap-border-subtle: rgba(236, 232, 225, 0.1);
    --uap-border-light: #2a2723;
    --uap-border-glass: rgba(30, 28, 25, 0.6);
    --uap-text: #ece8e1;
    --uap-text-muted: #b0aa9e;
    --uap-text-light: #8a857a;
    --uap-bg: #14120f;
    --uap-surface: #1e1b18;
    --uap-surface-hover: #2a2622;
    --uap-glass: rgba(30, 27, 24, 0.82);
    --uap-glass-card: rgba(30, 27, 24, 0.92);
    --uap-primary-light: #134039;
    --uap-primary-bg: #102e29;
    --uap-accent-bg: #2b2413;
}

/* Text entry can match :focus-visible even on click or autofocus.
   Keep the keyboard ring for actions; fields use their existing boundary. */
:is(button, a, input[type="checkbox"], input[type="radio"], [tabindex]:not(input, select, textarea)):where([class^="uap-"], [class*=" uap-"]):focus-visible,
:where(.uap-form-container, .uap-reward, .uap-comments-wrapper) :is(button, a, input[type="checkbox"], input[type="radio"], [tabindex]:not(input, select, textarea)):focus-visible {
    outline: 2px solid var(--uap-action-bg, #4f46e5) !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 3px #fff !important;
}

/* A single, stable border for standalone fields, including validation states. */
:is(input, select, textarea):where(.uap-input, .uap-modal-input, .uap-comment-input, .uap-wd-field-input, .uap-referral-url-input):focus,
.uap-comment-guest-field input:focus {
    outline: none !important;
    box-shadow: none !important;
    border-color: var(--uap-field-focus, var(--uap-action-bg, #4f46e5)) !important;
}

:is(input, select, textarea):where(.uap-input, .uap-modal-input, .uap-comment-input, .uap-wd-field-input, .uap-referral-url-input):is(.error, [aria-invalid="true"]),
.uap-comment-guest-field input:is(.error, [aria-invalid="true"]) {
    --uap-field-focus: var(--uap-error, #e11d48);
}

/* Composite controls own the boundary; their inner fields stay borderless.
   Scope these resets to known components so host theme fields are untouched. */
.uap-thought-search-bar input.uap-search-bar-input,
.uap-messages-modal textarea.uap-dm-input,
.uap-chat-input-wrap textarea.uap-chat-input,
.uap-profile-url-input input,
.uap-reward-custom__input input,
.uap-wd-amount-wrap input.uap-wd-amount-input {
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
}

:is(.uap-search-bar-inner, .uap-dm-input-container, .uap-chat-input-wrap,
    .uap-profile-url-input, .uap-reward-custom__input, .uap-wd-amount-wrap):focus-within {
    border-color: var(--uap-action-bg, #4f46e5) !important;
    box-shadow: none !important;
}

/* Preserve positioning transforms and animation completion events. */
@media (prefers-reduced-motion: reduce) {
    :where([class^="uap-"], [class*=" uap-"]),
    :where([class^="uap-"], [class*=" uap-"])::before,
    :where([class^="uap-"], [class*=" uap-"])::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        animation-delay: 0s !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0s !important;
        scroll-behavior: auto !important;
    }
    :is(.uap-btn, .uap-button, .uap-profile-action-btn, .uap-action-btn, .uap-action-icon,
        .uap-thought-card, .uap-thought-action, .uap-emoji-item, .uap-comment-action-btn,
        .uap-comment-tool-btn, .uap-comment-submit, .uap-comment-cancel, .uap-comment-login-btn,
        .uap-plan-card, .uap-plan-button, .uap-faq-item, .uap-payment-method,
        .uap-payment-method-item, .uap-submit-payment, .uap-payment-modal__confirm,
        .uap-reward__button, .uap-reward-amount, .uap-reward-method, .uap-reward-submit,
        .uap-social-btn, .uap-profile-stat, .uap-profile-badge-item, .uap-profile-avatar,
        .uap-btn-refresh):is(:hover, :active),
    :is(.uap-thought-avatar, .uap-social-btn, .uap-reward__avatars):hover img,
    :is(.uap-thought-action, .uap-action-btn, .uap-reward__button):hover svg {
        transform: none !important;
        top: auto;
    }
}