/*
 * 统一设计令牌 — 所有暗色主题共享
 * 玻璃态、间距、圆角、断点、容器、无障碍
 */

/* 字体（Noto Sans SC + Noto Serif SC）由各布局 head 的 <link> 并行加载（2026-10-05 起，勿在此 @import 串行） */

:root {
    /* 字体系统：宋体展示字 + 黑体正文，营造人文质感 */
    --font-body: 'Noto Sans SC', 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-display: 'Noto Serif SC', 'Songti SC', 'Source Han Serif SC', Georgia, serif;

    /* 玻璃态 */
    --glass-bg: rgba(255, 255, 255, 0.06);
    --glass-border: rgba(255, 255, 255, 0.12);
    --glass-blur: 16px;

    /* 层级表面：实体叠层（顶边高光 + 颗粒），比纯玻璃更有材质感 */
    --surface-1: rgba(255, 255, 255, 0.035);
    --surface-2: rgba(255, 255, 255, 0.06);
    --surface-hi: rgba(255, 255, 255, 0.07);   /* 顶边内高光 */
    --hairline: rgba(255, 255, 255, 0.10);     /* 发丝边框 */
    --hairline-strong: rgba(255, 255, 255, 0.16);

    /* 颗粒纹理（SVG 分形噪声），叠加在背景上做触感层 */
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

    /* 结构 */
    --radius-card: 16px;
    --radius-btn: 12px;
    --radius-input: 10px;
    --container-max: 1200px;
    --container-pad: 20px;

    /* 间距系统 (4px 基准) */
    --space-1: 0.25rem;   /* 4px */
    --space-2: 0.5rem;    /* 8px */
    --space-3: 0.75rem;   /* 12px */
    --space-4: 1rem;      /* 16px */
    --space-5: 1.25rem;   /* 20px */
    --space-6: 1.5rem;    /* 24px */
    --space-8: 2rem;      /* 32px */
    --space-10: 2.5rem;   /* 40px */
    --space-12: 3rem;     /* 48px */

    /* 圆角扩展 */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-full: 9999px;

    /* 阴影系统 */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.2);

    /* 过渡 */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* 表单色彩令牌 */
    --form-text:            rgba(255, 255, 255, 0.92);   /* 输入文本 */
    --form-label:           rgba(255, 255, 255, 0.88);   /* 表单标签 */
    --form-placeholder:     rgba(255, 255, 255, 0.70);   /* 占位符 */
    --form-help:            rgba(255, 255, 255, 0.70);   /* 帮助文本 */
    --form-input-bg:        rgba(255, 255, 255, 0.08);   /* 输入框背景 */
    --form-input-bg-focus:  rgba(255, 255, 255, 0.12);   /* 输入框聚焦背景 */
    --form-input-border:    rgba(255, 255, 255, 0.18);   /* 输入框边框 */

    /* UI 辅助色彩令牌 */
    --ui-hint:              rgba(255, 255, 255, 0.70);   /* 次要提示 */
    --ui-muted:             rgba(255, 255, 255, 0.60);   /* 弱化文本 */
    --ui-subtle:            rgba(255, 255, 255, 0.50);   /* 微弱文本 */
    --ui-faint:             rgba(255, 255, 255, 0.40);   /* 最弱可读（排序指示器） */

    /* 无障碍令牌 */
    --a11y-font-scale:      1;
    --a11y-text-primary:    rgba(255, 255, 255, 0.96);
    --a11y-text-muted:      rgba(255, 255, 255, 0.78);
    --a11y-border-strong:   rgba(255, 255, 255, 0.35);

    /* 排版细节 */
    --kicker-tracking: 0.22em;   /* 眉题字距 */
    --display-tracking: -0.01em; /* 大标题字距 */
}

/* Reset */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* 容器 */
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-pad);
}

/* 优雅的淡入动画 */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 优雅的焦点样式 */
*:focus-visible {
    outline: 2px solid var(--c-primary, #6366f1);
    outline-offset: 2px;
}

/* 优雅的选择样式 */
::selection {
    background: rgba(99, 102, 241, 0.2);
    color: inherit;
}

/* 平滑的图片加载 */
img {
    transition: opacity var(--transition-base);
}

/* 无障碍 */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* 大字模式：在根元素上切换，避免破坏布局 */
html.a11y-large-text {
    font-size: calc(16px * var(--a11y-font-scale, 1.125));
    --a11y-font-scale: 1.125;
}

/* 高对比模式：强制提升文字与边框对比度 */
html.a11y-high-contrast {
    --form-text:            #ffffff;
    --form-label:           #ffffff;
    --form-placeholder:     rgba(255, 255, 255, 0.85);
    --form-help:            rgba(255, 255, 255, 0.85);
    --form-input-bg:        rgba(255, 255, 255, 0.14);
    --form-input-bg-focus:  rgba(255, 255, 255, 0.20);
    --form-input-border:    rgba(255, 255, 255, 0.45);
    --ui-hint:              rgba(255, 255, 255, 0.85);
    --ui-muted:             rgba(255, 255, 255, 0.75);
    --ui-subtle:            rgba(255, 255, 255, 0.65);
    --ui-faint:             rgba(255, 255, 255, 0.55);
    --glass-bg:             rgba(255, 255, 255, 0.12);
    --glass-border:           rgba(255, 255, 255, 0.25);
    --a11y-border-strong:   rgba(255, 255, 255, 0.55);
}