/**
 * 主题: 纸鸢图床ZIH
 * 开发者: 白木
 * 开发者的博客: https://gl.baimu.live/
 * 
 * CSS变量定义文件 🎨
 * 
 * @package Zhiyuan_Imgzus
 */

/* 🎯 主题基础变量 */
:root {
    /* 🔤 字体 */
    --font-family: 'XNYT', 'PingFang SC', 'Microsoft YaHei', sans-serif;

    /* 🎨 赛博朋克霓虹色系（浅色背景优化） */
    --neon-primary: #0EA5E9;
    --neon-secondary: #E11D48;
    --neon-purple: #9333EA;
    --neon-green: #059669;
    --neon-orange: #D97706;

    /* 🌟 明亮优雅淡色背景 */
    --bg-deep: #F8FAFC;
    --bg-panel: rgba(255, 255, 255, 0.8);
    --bg-glass: rgba(241, 245, 249, 0.9);

    /* 📝 文字颜色（深色背景适配） */
    --text-white: #1E293B;
    --text-white-80: rgba(30, 41, 59, 0.8);
    --text-white-70: rgba(30, 41, 59, 0.7);
    --text-white-60: rgba(30, 41, 59, 0.6);
    --text-white-50: rgba(30, 41, 59, 0.5);
    --text-white-40: rgba(30, 41, 59, 0.4);
    --text-white-30: rgba(30, 41, 59, 0.3);
    --text-white-10: rgba(30, 41, 59, 0.1);
    --text-white-05: rgba(30, 41, 59, 0.05);

    /* 📦 边框 */
    --border-light: rgba(30, 41, 59, 0.1);
    --border-medium: rgba(30, 41, 59, 0.2);
    
    /* 📏 间距 */
    --gap-xs: 0.25rem;
    --gap-sm: 0.5rem;
    --gap-md: 0.75rem;
    --gap-lg: 1rem;
    --gap-xl: 1.25rem;
    --gap-2xl: 1.5rem;
    --gap-3xl: 2rem;
    --gap-4xl: 2.5rem;
    --gap-5xl: 3rem;
    
    /* ⭕ 圆角 */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.625rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --radius-full: 50%;
    
    /* 💡 阴影 */
    --shadow-glow-sm: 0 0 0.625rem;
    --shadow-glow-md: 0 0 0.9375rem;
    --shadow-glow-lg: 0 0 1.25rem;
    
    /* ⏱️ 过渡 */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.4s ease;

    /* 📜 滚动条 */
    --scrollbar-size: 0.375rem;
    --scrollbar-track: rgba(30, 41, 59, 0.04);
    --scrollbar-thumb: rgba(14, 165, 233, 0.25);
    --scrollbar-thumb-hover: rgba(14, 165, 233, 0.45);
    --scrollbar-thumb-active: rgba(14, 165, 233, 0.6);
    --scrollbar-radius: var(--radius-full);

    /* 🌐 淡雅赛博朋克 UI（页脚分类等组件） */
    --cp-primary-rgb: 79, 229, 251;
    --cp-secondary-rgb: 255, 42, 109;
    --cp-accent-rgb: 168, 85, 247;
    --cp-white-rgb: 255, 255, 255;
    --cp-color-primary: #4FE5FB;
    --cp-color-primary-dark: #0891b2;
    --cp-color-gray-600: #6c757d;
    --cp-color-gray-700: #495057;
    --cp-color-gray-800: #343a40;
    --cp-glass-white: rgba(var(--cp-white-rgb), 0.75);
    --cp-glass-white-heavy: rgba(var(--cp-white-rgb), 0.85);
    --cp-glass-white-light: rgba(var(--cp-white-rgb), 0.55);
    --cp-neon-cyan: rgba(var(--cp-primary-rgb), 0.25);
    --cp-gradient-glass: linear-gradient(135deg, var(--cp-glass-white) 0%, var(--cp-glass-white-light) 100%);
    --cp-gradient-primary: linear-gradient(135deg, rgba(var(--cp-primary-rgb), 0.85) 0%, rgba(var(--cp-accent-rgb), 0.75) 100%);
    --cp-gradient-neon-cyan: linear-gradient(135deg, rgba(var(--cp-primary-rgb), 0.3) 0%, rgba(var(--cp-primary-rgb), 0.1) 100%);
    --cp-radius-md: 1rem;
    --cp-radius-lg: 1.5rem;
    --cp-radius-xl: 2rem;
    --cp-radius-pill: 9999px;
    --cp-space-xs: 0.25rem;
    --cp-space-sm: 0.5rem;
    --cp-space-md: 1rem;
    --cp-space-lg: 1.5rem;
    --cp-space-xl: 2rem;
    --cp-border-neon-cyan: 1px solid rgba(var(--cp-primary-rgb), 0.3);
    --cp-border-glass: 1px solid rgba(var(--cp-white-rgb), 0.5);
    --cp-shadow-glass:
        0 0.5rem 2rem rgba(31, 38, 135, 0.08),
        inset 0 0.0625rem 0 rgba(255, 255, 255, 0.6);
    --cp-shadow-glass-hover:
        0 0.75rem 2.5rem rgba(31, 38, 135, 0.12),
        inset 0 0.0625rem 0 rgba(255, 255, 255, 0.7);
    --cp-shadow-glass-elevated:
        0 1.25rem 3.75rem rgba(31, 38, 135, 0.15),
        inset 0 0.0625rem 0 rgba(255, 255, 255, 0.7);
    --cp-shadow-neon-cyan:
        0 0 0.9375rem rgba(var(--cp-primary-rgb), 0.3),
        0 0 1.875rem rgba(var(--cp-primary-rgb), 0.15);
    --cp-shadow-neon-pink:
        0 0 0.9375rem rgba(var(--cp-secondary-rgb), 0.2),
        0 0 1.875rem rgba(var(--cp-secondary-rgb), 0.1);
    --cp-card-body-seal: #f6fbff;
    --cp-duration-normal: 300ms;
    --cp-duration-slow: 500ms;
    --cp-ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --cp-ease-out-expo: cubic-bezier(0.23, 1, 0.32, 1);
    --cp-font-title: var(--font-family);
    --cp-wave-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 280' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0,0h1440v198c-300,64-600,-36-900,22-120,20-240,10-360,20-120,10-360,-8-540,18v22H0z'/%3E%3C/svg%3E");
}