/*
 * 浏览器兼容 CSS 回退
 */

:root.xun-no-oklch {
    /* 基础 */
    --color-white: #ffffff;

    /* 文本 */
    --color-text: rgba(0, 0, 0, 0.88);
    --color-text-secondary: rgba(0, 0, 0, 0.65);
    --color-text-tertiary: rgba(0, 0, 0, 0.45);
    --color-text-quaternary: rgba(0, 0, 0, 0.25);

    /* 边框 */
    --color-border: #d9d9d9;
    --color-border-secondary: #f0f0f0;

    /* 填充 */
    --color-fill: rgba(0, 0, 0, 0.15);
    --color-fill-secondary: rgba(0, 0, 0, 0.06);
    --color-fill-tertiary: rgba(0, 0, 0, 0.04);
    --color-fill-quaternary: rgba(0, 0, 0, 0.02);

    /* 背景 */
    --color-bg-container: #ffffff;
    --color-bg-elevated: #ffffff;
    --color-bg-layout: #f5f5f5;
    --color-bg-spotlight: rgba(0, 0, 0, 0.85);
    --color-bg-mask: rgba(0, 0, 0, 0.45);

    /* 中性色（常用于卡片、分隔、阴影层次） */
    --color-neutral-50: #fafafa;
    --color-neutral-100: #f5f5f5;
    --color-neutral-200: #e5e5e5;
    --color-neutral-300: #d4d4d4;
    --color-neutral-400: #a3a3a3;
    --color-neutral-500: #737373;
    --color-neutral-600: #525252;
    --color-neutral-700: #404040;
    --color-neutral-800: #262626;
    --color-neutral-900: #171717;
    --color-neutral-950: #0a0a0a;

    /* Tailwind 常用基础色（避免少量组件直接引用时报“透明”） */
    --color-gray-100: #f3f4f6;
    --color-gray-200: #e5e7eb;
    --color-gray-300: #d1d5db;
    --color-gray-700: #374151;
    --color-gray-900: #111827;
    --color-red-500: #ef4444;
    --color-blue-500: #3b82f6;

    /* 主题主色（尽量贴近原设计，同时尊重后台自定义） */
    --color-primary: var(--xun-primary, #1677ff);
    --color-primary-hover: var(--xun-primary-hover, #4096ff);
    --color-primary-active: var(--xun-primary-active, #0958d9);
    --color-primary-bg: #e6f4ff;
    --color-primary-bg-hover: #bae0ff;
    --color-primary-border: #91caff;
    --color-primary-border-hover: #69b1ff;
    --color-primary-text: var(--xun-primary, #1677ff);
    --color-primary-text-hover: var(--xun-primary-hover, #4096ff);
    --color-primary-text-active: var(--xun-primary-active, #0958d9);

    /* 成功色（对应后台 secondary_color） */
    --color-success: var(--xun-secondary, #52c41a);
    --color-success-hover: #73d13d;
    --color-success-active: #389e0d;
    --color-success-bg: #f6ffed;
    --color-success-bg-hover: #d9f7be;
    --color-success-border: #b7eb8f;
    --color-success-border-hover: #95de64;
    --color-success-text: var(--xun-secondary, #52c41a);
    --color-success-text-hover: #73d13d;
    --color-success-text-active: #389e0d;

    /* 警告色 */
    --color-warning: #faad14;
    --color-warning-hover: #d48806;
    --color-warning-active: #ad6800;
    --color-warning-bg: #fffbe6;
    --color-warning-bg-hover: #fff1b8;
    --color-warning-border: #ffe58f;
    --color-warning-border-hover: #ffd666;
    --color-warning-text: #faad14;
    --color-warning-text-hover: #d48806;
    --color-warning-text-active: #ad6800;

    /* 错误色 */
    --color-error: #ff4d4f;
    --color-error-hover: #ff7875;
    --color-error-active: #d9363e;
    --color-error-bg: #fff2f0;
    --color-error-bg-hover: #ffccc7;
    --color-error-border: #ffa39e;
    --color-error-border-hover: #ff7875;
    --color-error-text: #ff4d4f;
    --color-error-text-hover: #ff7875;
    --color-error-text-active: #d9363e;

    /* 信息/链接 */
    --color-info: var(--xun-primary, #1677ff);
    --color-info-bg: #e6f4ff;
    --color-info-border: #91caff;
    --color-link: var(--xun-primary, #1677ff);
    --color-link-hover: var(--xun-primary-hover, #4096ff);
    --color-link-active: var(--xun-primary-active, #0958d9);

    /* 兼容旧变量（部分组件使用） */
    --page-bg: var(--color-bg-layout);
    --text-primary: var(--color-text);
    --text-secondary: var(--color-text-secondary);
    --text-muted: var(--color-text-tertiary);
}

/* 自动深色模式（未强制 light，且未手动指定 dark） */
@media (prefers-color-scheme: dark) {
    :root.xun-no-oklch:not(.light):not(.dark) {
        --color-text: rgba(255, 255, 255, 0.85);
        --color-text-secondary: rgba(255, 255, 255, 0.65);
        --color-text-tertiary: rgba(255, 255, 255, 0.45);
        --color-text-quaternary: rgba(255, 255, 255, 0.25);

        --color-border: #303030;
        --color-border-secondary: #262626;

        --color-fill: rgba(255, 255, 255, 0.18);
        --color-fill-secondary: rgba(255, 255, 255, 0.12);
        --color-fill-tertiary: rgba(255, 255, 255, 0.08);
        --color-fill-quaternary: rgba(255, 255, 255, 0.04);

        --color-bg-container: #1f1f1f;
        --color-bg-elevated: #262626;
        --color-bg-layout: #0f0f0f;
        --color-bg-spotlight: rgba(255, 255, 255, 0.85);
        --color-bg-mask: rgba(0, 0, 0, 0.65);

        --page-bg: var(--color-bg-layout);
        --text-primary: var(--color-text);
        --text-secondary: var(--color-text-secondary);
        --text-muted: var(--color-text-tertiary);

        /* 深色模式下的语义背景（用于 focus/提示等） */
        --color-primary-bg: rgba(22, 119, 255, 0.18);
        --color-primary-bg-hover: rgba(22, 119, 255, 0.24);
        --color-success-bg: rgba(82, 196, 26, 0.18);
        --color-success-bg-hover: rgba(82, 196, 26, 0.24);
        --color-warning-bg: rgba(250, 173, 20, 0.18);
        --color-warning-bg-hover: rgba(250, 173, 20, 0.24);
        --color-error-bg: rgba(255, 77, 79, 0.18);
        --color-error-bg-hover: rgba(255, 77, 79, 0.24);
    }
}

/* 手动深色模式（.dark 类） */
:root.xun-no-oklch.dark {
    --color-text: rgba(255, 255, 255, 0.85);
    --color-text-secondary: rgba(255, 255, 255, 0.65);
    --color-text-tertiary: rgba(255, 255, 255, 0.45);
    --color-text-quaternary: rgba(255, 255, 255, 0.25);

    --color-border: #303030;
    --color-border-secondary: #262626;

    --color-fill: rgba(255, 255, 255, 0.18);
    --color-fill-secondary: rgba(255, 255, 255, 0.12);
    --color-fill-tertiary: rgba(255, 255, 255, 0.08);
    --color-fill-quaternary: rgba(255, 255, 255, 0.04);

    --color-bg-container: #1f1f1f;
    --color-bg-elevated: #262626;
    --color-bg-layout: #0f0f0f;
    --color-bg-spotlight: rgba(255, 255, 255, 0.85);
    --color-bg-mask: rgba(0, 0, 0, 0.65);

    --page-bg: var(--color-bg-layout);
    --text-primary: var(--color-text);
    --text-secondary: var(--color-text-secondary);
    --text-muted: var(--color-text-tertiary);

    --color-primary-bg: rgba(22, 119, 255, 0.18);
    --color-primary-bg-hover: rgba(22, 119, 255, 0.24);
    --color-success-bg: rgba(82, 196, 26, 0.18);
    --color-success-bg-hover: rgba(82, 196, 26, 0.24);
    --color-warning-bg: rgba(250, 173, 20, 0.18);
    --color-warning-bg-hover: rgba(250, 173, 20, 0.24);
    --color-error-bg: rgba(255, 77, 79, 0.18);
    --color-error-bg-hover: rgba(255, 77, 79, 0.24);
}

/* 1) inset 回退：确保遮罩/overlay 在不支持 inset 的浏览器也能铺满 */
.mask,
.bottom-sheet-overlay,
.xun-modal,
.xun-modal-overlay,
.xun-auth-loading-modal,
.xun-auth-loading-modal .xun-modal-overlay {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

/* 2) oklch/变量回退：避免遮罩/容器在不支持 oklch 的浏览器中变透明 */
.mask {
    background-color: rgba(0, 0, 0, 0.45);
    background-color: var(--color-bg-mask);
}

.xun-modal-overlay,
.xun-auth-loading-modal .xun-modal-overlay {
    background-color: rgba(0, 0, 0, 0.45);
    background-color: var(--color-bg-mask);
}

.dark .mask,
body.dark .mask {
    background-color: rgba(0, 0, 0, 0.65);
    background-color: var(--color-bg-mask);
}

.dark .xun-modal-overlay,
body.dark .xun-modal-overlay,
.dark .xun-auth-loading-modal .xun-modal-overlay,
body.dark .xun-auth-loading-modal .xun-modal-overlay {
    background-color: rgba(0, 0, 0, 0.65);
    background-color: var(--color-bg-mask);
}

.modal {
    background-color: #ffffff;
    background-color: var(--color-bg-container);
}

.dark .modal,
body.dark .modal {
    background-color: #1f1f1f;
    background-color: var(--color-bg-container);
}

.xun-modal-content,
.xun-auth-loading-content {
    background: #ffffff;
    background: var(--color-bg-elevated);
}

.dark .xun-modal-content,
body.dark .xun-modal-content,
.dark .xun-auth-loading-content,
body.dark .xun-auth-loading-content {
    background: #1f1f1f;
    background: var(--color-bg-elevated);
}

.bottom-sheet {
    background: #f5f5f5;
    background: var(--color-bg-layout);
}

.dark .bottom-sheet,
body.dark .bottom-sheet {
    background: #111111;
    background: var(--color-bg-layout);
}