/**
 * 瑾佳文化传媒工作室 - 性能与体验优化样式
 * @version 1.0.0
 * 包含：
 * 1. 全局CSS变量与基础样式
 * 2. 响应式断点（手机/平板/桌面/大屏）
 * 3. 性能优化（GPU加速、will-change）
 * 4. 可访问性（prefers-reduced-motion、focus-visible）
 * 5. 深色模式
 * 6. 跨浏览器兼容（-webkit-前缀）
 */

/* ===== 基础Reset ===== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ===== CSS变量（统一设计令牌） ===== */
:root {
    /* 背景 */
    --bg-base: #f5f7fb;
    --bg-elevated: rgba(255, 255, 255, 0.85);
    --bg-elevated-strong: rgba(255, 255, 255, 0.95);
    --bg-subtle: rgba(248, 250, 252, 0.6);

    /* 文本（增强对比度，符合WCAG AA） */
    --text-primary: #0F172A;
    --text-secondary: #334155;
    --text-tertiary: #64748B;
    --text-quaternary: #94A3B8;
    --text-inverse: #FFFFFF;

    /* 边框 */
    --border-subtle: rgba(15, 23, 42, 0.06);
    --border-default: rgba(15, 23, 42, 0.10);
    --border-strong: rgba(15, 23, 42, 0.16);
    --border-focus: rgba(0, 102, 204, 0.45);

    /* 阴影 */
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.06), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
    --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.10), 0 8px 10px -6px rgba(15, 23, 42, 0.05);
    --shadow-2xl: 0 25px 50px -12px rgba(15, 23, 42, 0.15);
    --shadow-inner: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(135, 206, 235, 0.05);
    --shadow-glow: 0 0 0 3px rgba(0, 102, 204, 0.15);

    /* 强调色 */
    --accent-blue: #0066CC;
    --accent-blue-light: #87CEEB;
    --accent-blue-dark: #1E5BB8;
    --accent-blue-soft: rgba(0, 102, 204, 0.08);
    --accent-gold: #D4AF37;
    --accent-gold-dark: #B8960C;
    --accent-gold-soft: rgba(212, 175, 55, 0.12);

    /* 渐变 */
    --gradient-bg: linear-gradient(135deg, #f0f4ff 0%, #e8f0fe 25%, #f5f0ff 50%, #e0f0f5 75%, #f0f4ff 100%);
    --gradient-hero: linear-gradient(135deg, #FAFBFF 0%, #F0F5FB 50%, #FAFBFF 100%);
    --gradient-card: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.7) 100%);
    --gradient-shine: linear-gradient(90deg, transparent, rgba(135,206,235,0.4), rgba(212,175,55,0.3), transparent);

    /* 字体 */
    --font-sans: 'PingFang SC', 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-mono: 'SF Mono', Monaco, Consolas, 'Courier New', monospace;

    /* 字号（基于1rem=16px） */
    --text-xs: 0.75rem;
    --text-sm: 0.85rem;
    --text-base: 0.95rem;
    --text-md: 1rem;
    --text-lg: 1.15rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-5xl: 3rem;
    --text-6xl: 4rem;

    /* 行高 */
    --leading-tight: 1.2;
    --leading-snug: 1.4;
    --leading-normal: 1.6;
    --leading-relaxed: 1.75;
    --leading-loose: 2;

    /* 字间距 */
    --tracking-tight: -0.02em;
    --tracking-normal: 0;
    --tracking-wide: 0.05em;
    --tracking-wider: 0.1em;

    /* 间距（4px基准） */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-7: 1.75rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;

    /* 圆角 */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 24px;
    --radius-full: 9999px;

    /* 动画 */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --duration-fast: 150ms;
    --duration-base: 300ms;
    --duration-slow: 500ms;
    --duration-slower: 800ms;

    /* 焦点环 */
    --focus-ring: 0 0 0 3px rgba(0, 102, 204, 0.25);
    --focus-ring-offset: 0 0 0 2px var(--bg-base), 0 0 0 4px var(--accent-blue);

    /* 层级 */
    --z-base: 1;
    --z-elevated: 10;
    --z-sticky: 100;
    --z-modal: 1000;
    --z-popover: 1001;
    --z-toast: 2000;
    --z-countdown: 9999;
    --z-login: 10000;

    /* 布局 */
    --sidebar-w: 220px;
    --header-h: 64px;
    --content-max: 1280px;
}

/* ===== 响应式断点变量 ===== */
/* 平板 */
@media (max-width: 1024px) {
    :root {
        --sidebar-w: 200px;
    }
}

/* 手机 */
@media (max-width: 768px) {
    :root {
        --sidebar-w: 0px;
    }
}

/* ===== 深色模式 ===== */
[data-theme="dark"] {
    --bg-base: #0F172A;
    --bg-elevated: rgba(15, 23, 42, 0.85);
    --bg-elevated-strong: rgba(15, 23, 42, 0.95);
    --bg-subtle: rgba(30, 41, 59, 0.6);

    --text-primary: #F1F5F9;
    --text-secondary: #CBD5E1;
    --text-tertiary: #94A3B8;
    --text-quaternary: #64748B;

    --border-subtle: rgba(255, 255, 255, 0.06);
    --border-default: rgba(255, 255, 255, 0.10);
    --border-strong: rgba(255, 255, 255, 0.16);

    --gradient-bg: linear-gradient(135deg, #0F172A 0%, #1E293B 50%, #0F172A 100%);
    --gradient-card: linear-gradient(135deg, rgba(30, 41, 59, 0.9) 0%, rgba(15, 23, 42, 0.7) 100%);
}

/* ===== 全局基础样式 ===== */
html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: var(--font-sans);
    background: var(--gradient-bg);
    background-size: 400% 400%;
    animation: gradientShift 20s ease infinite;
    color: var(--text-primary);
    overflow-x: hidden;
    position: relative;
    line-height: var(--leading-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    min-height: 100vh;
    min-height: 100dvh; /* 移动端动态视口高度 */
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(ellipse at 20% 50%, rgba(135,206,235,0.10) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(212,175,55,0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 40% 80%, rgba(176,224,230,0.08) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ===== 滚动条（跨浏览器） ===== */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(135, 206, 235, 0.3) transparent;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(135, 206, 235, 0.3);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(135, 206, 235, 0.5); }

/* ===== 媒体元素基础样式 ===== */
img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
    height: auto;
}

img {
    -webkit-user-drag: none;
    user-select: none;
    -webkit-user-select: none;
}

/* ===== 表单元素 ===== */
input, button, textarea, select {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
    background: none;
    border: none;
    -webkit-appearance: none;
    appearance: none;
}

/* ===== 链接 ===== */
a {
    color: var(--accent-blue);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

/* ===== 标题层级 ===== */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: var(--leading-tight);
    color: var(--text-primary);
}

/* ===== 焦点环（键盘可访问性） ===== */
:focus { outline: none; }
:focus-visible {
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ===== 跳过链接（可访问性） ===== */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--accent-blue);
    color: #fff;
    padding: 8px 16px;
    z-index: 100000;
    text-decoration: none;
    border-radius: 0 0 8px 0;
    transition: top 0.2s ease;
}

.skip-link:focus {
    top: 0;
}

/* ===== 图片懒加载淡入 ===== */
img[loading="lazy"] {
    opacity: 0;
    transition: opacity var(--duration-base) var(--ease-out);
}

img[loading="lazy"].loaded,
img[loading="lazy"][src] {
    opacity: 1;
}

/* ===== 减少动画偏好（可访问性） ===== */
@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: #fff; color: #000; }
    .sidebar, .theme-toggle, .mobile-menu-toggle,
    .player-modal, [class*="modal"], [class*="player"] {
        display: none !important;
    }
    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.85em;
        color: #666;
    }
    a[href^="#"]::after,
    a[href^="javascript:"]::after { content: ""; }
}

/* ===== 触摸设备优化 ===== */
@media (hover: none) and (pointer: coarse) {
    /* 触摸设备：增大可点击区域 */
    button, a, [role="button"] {
        min-height: 44px;
        min-width: 44px;
    }
}

/* ===== 横屏手机优化 ===== */
@media (max-width: 768px) and (orientation: landscape) {
    body { font-size: 14px; }
}

/* ===== 大屏（4K）优化 ===== */
@media (min-width: 1920px) {
    :root {
        --sidebar-w: 260px;
    }
    body { font-size: 18px; }
}

/* ===== 折叠屏适配 ===== */
@media (max-width: 280px) {
    body { font-size: 13px; }
}

/* ===== iOS安全区域 ===== */
@supports (padding: env(safe-area-inset-top)) {
    body {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
}

/* ===== 暗色模式系统偏好 ===== */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
    }
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
        color-scheme: light;
    }
}