@charset "utf-8";

/* ==========================================================================
   现代CSS特性 - Modern CSS Features
   ========================================================================== */

/* CSS自定义属性 (CSS Variables) 扩展 */
:root {
    /* 渐变色系统 */
    --gradient-primary: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    --gradient-secondary: linear-gradient(45deg, var(--secondary-color), #FFD700);
    --gradient-neutral: linear-gradient(to right, #f8f9fa, #e9ecef);
    --gradient-dark: linear-gradient(135deg, #2c3e50, #3498db);
    
    /* 阴影系统 */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    --shadow-md: 0 3px 6px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.15), 0 3px 6px rgba(0, 0, 0, 0.10);
    --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.15), 0 5px 10px rgba(0, 0, 0, 0.12);
    
    /* 边框圆角系统 */
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --radius-3xl: 1.5rem;
    --radius-full: 9999px;
    
    /* 间距系统扩展 */
    --space-px: 1px;
    --space-0: 0;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    
    /* 字体大小系统 */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-5xl: 3rem;
    
    /* 行高系统 */
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --leading-loose: 2;
    
    /* Z-index系统 */
    --z-0: 0;
    --z-10: 10;
    --z-20: 20;
    --z-30: 30;
    --z-40: 40;
    --z-50: 50;
    --z-auto: auto;
}

/* CSS Grid 高级布局 */
.grid-auto-fit {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-4);
}

.grid-auto-fill {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-4);
}

/* 复杂Grid模板 */
.grid-layout-1 {
    display: grid;
    grid-template-areas: 
        "header header header"
        "sidebar main main"
        "footer footer footer";
    grid-template-columns: 250px 1fr 1fr;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
    gap: var(--space-4);
}

.grid-header { grid-area: header; }
.grid-sidebar { grid-area: sidebar; }
.grid-main { grid-area: main; }
.grid-footer { grid-area: footer; }

/* CSS Container Queries (现代浏览器支持) */
@supports (container-type: inline-size) {
    .container-card {
        container-type: inline-size;
    }
    
    @container (min-width: 400px) {
        .responsive-card {
            display: grid;
            grid-template-columns: 1fr 2fr;
            gap: var(--space-4);
        }
    }
}

/* 现代滤镜效果 */
.filter-blur-sm { filter: blur(4px); }
.filter-blur { filter: blur(8px); }
.filter-blur-lg { filter: blur(12px); }
.filter-brightness-50 { filter: brightness(0.5); }
.filter-brightness-75 { filter: brightness(0.75); }
.filter-brightness-125 { filter: brightness(1.25); }
.filter-contrast-125 { filter: contrast(1.25); }
.filter-grayscale { filter: grayscale(100%); }
.filter-sepia { filter: sepia(100%); }
.filter-hue-rotate-90 { filter: hue-rotate(90deg); }
.filter-invert { filter: invert(100%); }
.filter-saturate-150 { filter: saturate(1.5); }

/* 组合滤镜效果 */
.filter-vintage {
    filter: sepia(50%) contrast(1.2) brightness(0.8);
}

.filter-cool {
    filter: hue-rotate(180deg) saturate(1.2);
}

.filter-warm {
    filter: hue-rotate(-30deg) saturate(1.1) brightness(1.1);
}

/* 背景混合模式 */
.mix-blend-multiply { mix-blend-mode: multiply; }
.mix-blend-screen { mix-blend-mode: screen; }
.mix-blend-overlay { mix-blend-mode: overlay; }
.mix-blend-darken { mix-blend-mode: darken; }
.mix-blend-lighten { mix-blend-mode: lighten; }
.mix-blend-color-dodge { mix-blend-mode: color-dodge; }
.mix-blend-color-burn { mix-blend-mode: color-burn; }

/* CSS渐变背景 */
.bg-gradient-primary {
    background: var(--gradient-primary);
}

.bg-gradient-secondary {
    background: var(--gradient-secondary);
}

.bg-gradient-radial {
    background: radial-gradient(circle, var(--primary-color) 0%, var(--secondary-color) 100%);
}

.bg-gradient-conic {
    background: conic-gradient(from 0deg, var(--primary-color), var(--secondary-color), var(--primary-color));
}

/* 现代阴影系统 */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }
.shadow-inner { box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1); }
.shadow-outline { box-shadow: 0 0 0 3px rgba(0, 5, 63, 0.1); }
.shadow-none { box-shadow: none; }

/* 彩色阴影 */
.shadow-primary { box-shadow: 0 4px 14px 0 rgba(0, 5, 63, 0.39); }
.shadow-secondary { box-shadow: 0 4px 14px 0 rgba(194, 125, 61, 0.39); }

/* 高级圆角 */
.rounded-none { border-radius: 0; }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-2xl { border-radius: var(--radius-2xl); }
.rounded-3xl { border-radius: var(--radius-3xl); }
.rounded-full { border-radius: var(--radius-full); }

/* 不规则圆角 */
.rounded-tl-lg { border-top-left-radius: var(--radius-lg); }
.rounded-tr-lg { border-top-right-radius: var(--radius-lg); }
.rounded-bl-lg { border-bottom-left-radius: var(--radius-lg); }
.rounded-br-lg { border-bottom-right-radius: var(--radius-lg); }
.rounded-t-lg { border-top-left-radius: var(--radius-lg); border-top-right-radius: var(--radius-lg); }
.rounded-b-lg { border-bottom-left-radius: var(--radius-lg); border-bottom-right-radius: var(--radius-lg); }

/* CSS Clip Path */
.clip-triangle {
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.clip-diamond {
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.clip-hexagon {
    clip-path: polygon(30% 0%, 70% 0%, 100% 50%, 70% 100%, 30% 100%, 0% 50%);
}

.clip-arrow {
    clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
}

/* CSS Variables 深色模式切换 */
.theme-dark {
    --primary-color: #4285f4;
    --secondary-color: #ff9800;
    --text-primary: #ffffff;
    --text-secondary: #b0b0b0;
    --bg-primary: #121212;
    --bg-secondary: #1e1e1e;
    --border-color: #333333;
}

/* 现代表单元素 */
.form-floating {
    position: relative;
}

.form-floating .form-input {
    padding-top: 1.625rem;
    padding-bottom: 0.625rem;
}

.form-floating .form-label {
    position: absolute;
    top: 0;
    left: 0.75rem;
    height: 100%;
    padding: 1rem 0.25rem 0 0;
    pointer-events: none;
    border: 1px solid transparent;
    transform-origin: 0 0;
    transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
}

.form-floating .form-input:focus ~ .form-label,
.form-floating .form-input:not(:placeholder-shown) ~ .form-label {
    opacity: 0.65;
    transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}

/* CSS逻辑属性 */
.margin-inline-4 {
    margin-inline-start: var(--space-4);
    margin-inline-end: var(--space-4);
}

.padding-block-2 {
    padding-block-start: var(--space-2);
    padding-block-end: var(--space-2);
}

/* CSS Scroll Snap */
.scroll-container {
    scroll-snap-type: x mandatory;
    overflow-x: scroll;
    display: flex;
}

.scroll-item {
    scroll-snap-align: center;
    flex-shrink: 0;
}

/* 现代文本效果 */
.text-gradient {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-stroke {
    -webkit-text-stroke: 2px var(--primary-color);
    -webkit-text-fill-color: transparent;
}

.text-shadow-sm { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); }
.text-shadow { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); }
.text-shadow-lg { text-shadow: 0 4px 8px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08); }

/* CSS Backdrop Filter */
.backdrop-blur {
    backdrop-filter: blur(8px);
    background: rgba(255, 255, 255, 0.8);
}

.backdrop-blur-sm {
    backdrop-filter: blur(4px);
    background: rgba(255, 255, 255, 0.9);
}

.backdrop-blur-lg {
    backdrop-filter: blur(16px);
    background: rgba(255, 255, 255, 0.7);
}

/* CSS Sticky定位 */
.sticky-top {
    position: sticky;
    top: 0;
    z-index: var(--z-20);
}

.sticky-bottom {
    position: sticky;
    bottom: 0;
    z-index: var(--z-20);
}

/* CSS aspect-ratio (现代浏览器) */
.aspect-square { aspect-ratio: 1/1; }
.aspect-video { aspect-ratio: 16/9; }
.aspect-photo { aspect-ratio: 4/3; }
.aspect-golden { aspect-ratio: 1.618/1; }

/* Fallback for older browsers */
@supports not (aspect-ratio: 1/1) {
    .aspect-square {
        position: relative;
        padding-bottom: 100%;
        height: 0;
    }
    
    .aspect-square > * {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    
    .aspect-video {
        position: relative;
        padding-bottom: 56.25%;
        height: 0;
    }
    
    .aspect-video > * {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}

/* CSS Gap替代方案 */
@supports not (gap: 1rem) {
    .flex-gap-4 > * + * {
        margin-left: var(--space-4);
    }
    
    .flex-column.flex-gap-4 > * + * {
        margin-left: 0;
        margin-top: var(--space-4);
    }
}