/**
 * 共用主题变量和基础样式
 * 被所有页面（app、me、root）共享
 * 
 * 文件用途：
 * - 统一CSS颜色变量、尺寸、间距
 * - 统一基础样式重置
 * - 提供主题切换支持
 * 
 * 维护者：主题系统
 * 最后修改：2026-03-21
 */

/* ========== 颜色变量和主题定义 ========== */
:root {
    /* 背景色系 */
    --bg-primary: #0a0a0f;
    --bg-secondary: #111118;
    --bg-tertiary: #1a1a24;
    --bg-card: #14141c;
    --bg-card-elevated: rgba(20, 20, 28, 0.92);

    /* 文本色系 */
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.65);
    --text-muted: rgba(255, 255, 255, 0.4);
    --text-caption: rgba(255, 255, 255, 0.55);

    /* 边框色系 */
    --border: rgba(255, 255, 255, 0.08);
    --border-light: rgba(255, 255, 255, 0.05);
    --border-subtle: rgba(255, 255, 255, 0.03);

    /* 强调色系 - 紫色主题 */
    --accent: #8b5cf6;
    --accent-light: #a78bfa;
    --accent-dark: #7c3aed;
    --accent-soft: rgba(139, 92, 246, 0.15);
    --accent-glow: rgba(139, 92, 246, 0.25);

    /* 功能色系 */
    --danger: #ef4444;
    --danger-soft: rgba(239, 68, 68, 0.15);
    --success: #22c55e;
    --success-soft: rgba(34, 197, 94, 0.15);
    --success-glow: rgba(74, 222, 128, 0.20);
    --warning: #f59e0b;
    --warning-soft: rgba(245, 158, 11, 0.15);

    /* 阴影系 */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.15);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.25);
    --shadow-accent: 0 4px 24px rgba(139, 92, 246, 0.15);

    /* 安全区（刘海屏适配） */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);

    /* 尺寸和间距 */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-full: 9999px;

    /* 排版 */
    --font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --line-height-tight: 1.3;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;
    --letter-spacing-tight: -0.01em;
    --letter-spacing-normal: 0.01em;
    --letter-spacing-wide: 0.05em;

    /* 过渡时间 */
    --transition-fast: 150ms;
    --transition-base: 200ms;
    --transition-slow: 300ms;
    --easing-linear: linear;
    --easing-ease: ease;
    --easing-ease-in: cubic-bezier(0.4, 0, 1, 1);
    --easing-ease-out: cubic-bezier(0, 0, 0.2, 1);
    --easing-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --easing-bounce: cubic-bezier(0.32, 0.72, 0, 1);
}

/* ========== 主题切换支持（亮色主题） ========== */
[data-theme="light"]:root {
    --bg-primary: #ffffff;
    --bg-secondary: #f9f9fb;
    --bg-tertiary: #f0f0f5;
    --bg-card: #ffffff;
    --bg-card-elevated: rgba(255, 255, 255, 0.98);

    --text-primary: #1a1a1f;
    --text-secondary: rgba(26, 26, 31, 0.65);
    --text-muted: rgba(26, 26, 31, 0.4);
    --text-caption: rgba(26, 26, 31, 0.55);

    --border: rgba(0, 0, 0, 0.08);
    --border-light: rgba(0, 0, 0, 0.05);
    --border-subtle: rgba(0, 0, 0, 0.03);

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
}

/* ========== 全局基础样式重置 ========== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html {
    font-size: 16px;
    height: 100%;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family);
    background: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    letter-spacing: var(--letter-spacing-normal);
}

/* 禁用选中文本时的系统UI */
::-webkit-selection {
    background: var(--accent-soft);
    color: var(--text-primary);
}

::selection {
    background: var(--accent-soft);
    color: var(--text-primary);
}

/* 滚动条美化 */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* ========== UI尺寸适配 ========== */
/* 小尺寸（紧凑） */
[data-ui-size="small"] {
    --font-size-sm: 0.8rem;
    --font-size-base: 0.9rem;
    --font-size-lg: 1rem;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
}

/* 中等尺寸（默认） */
[data-ui-size="medium"] {
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
}

/* 大尺寸（舒适） */
[data-ui-size="large"] {
    --font-size-sm: 0.95rem;
    --font-size-base: 1.1rem;
    --font-size-lg: 1.25rem;
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 18px;
}

/* ========== 无障碍和打印样式 ========== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

@media print {
    body {
        background: white;
        color: black;
    }
}