/* =====================================================
   设计令牌 (Design Tokens)
   
   所有 CSS 变量、色彩、字体、间距、圆角、阴影、断点
   此文件不包含任何选择器规则——仅有 :root 和 dark-mode 变量
   ===================================================== */

/* ===== 浅色模式令牌 ===== */
:root {
    /* 橙色谱系 */
    --orange-peel: #FF6B35;
    --orange-flesh: #FFA726;
    --orange-pulp: #FFCC80;
    --orange-membrane: #FFE0B2;
    --orange-juice: #FF8A50;
    --orange-shadow: #E65100;
    
    /* 自然点缀色 */
    --leaf-green: #66BB6A;
    --leaf-dark: #388E3C;
    --stem-brown: #8D6E63;
    
    /* 光影系统 */
    --sunshine: #FFF8E1;
    --sunshine-warm: #FFFAF0;
    --soft-shadow: rgba(230, 81, 0, 0.12);
    --glow-effect: rgba(255, 167, 38, 0.4);
    --glow-subtle: rgba(255, 167, 38, 0.15);
    
    /* 主题色映射 */
    --color-primary: var(--orange-peel);
    --color-primary-light: var(--orange-flesh);
    --color-primary-dark: var(--orange-shadow);
    
    /* 深色锚点（叙事节奏） */
    --surface-dark: #1A1612;
    --surface-dark-elevated: #2A2420;
    --text-on-dark: #F5F0EB;
    --text-on-dark-muted: #A89B8C;
    
    /* 冷色调对比 */
    --accent-cool: #4A6FA5;
    --accent-cool-light: #E8EEF5;
    
    /* 背景 */
    --color-bg-main: linear-gradient(135deg, var(--sunshine) 0%, var(--orange-membrane) 100%);
    --color-bg-card: #ffffff;
    --color-bg-section: #ffffff;
    --color-bg-footer: var(--surface-dark);
    --color-bg-highlight: linear-gradient(135deg, #FFF8F3 0%, #FFF2E8 100%);
    --surface-primary: #FEFCFA;
    --surface-secondary: #F7F3EF;
    
    /* 文字色 */
    --color-text-primary: #1A1612;
    --color-text-secondary: #5C5550;
    --color-text-muted: #736B66;       /* WCAG AA ≥ 4.5:1 on #FEFCFA */
    --color-text-inverse: #ffffff;
    
    /* 功能色 */
    --color-success: #38A169;
    --color-info: var(--accent-cool);
    --color-error: #C53030;
    --color-warning: #D69E2E;
    
    /* 边框色 */
    --color-border: rgba(255, 107, 53, 0.12);
    --color-border-hover: rgba(255, 107, 53, 0.25);
    --color-border-active: rgba(255, 107, 53, 0.4);
    
    /* 阴影系统 */
    --shadow-xs: 0 1px 2px rgba(26, 22, 18, 0.04);
    --shadow-sm: 0 2px 4px rgba(26, 22, 18, 0.04), 0 1px 2px rgba(26, 22, 18, 0.06);
    --shadow-md: 0 4px 8px rgba(26, 22, 18, 0.04), 0 2px 4px rgba(26, 22, 18, 0.06);
    --shadow-lg: 0 12px 24px rgba(26, 22, 18, 0.06), 0 4px 8px rgba(26, 22, 18, 0.04);
    --shadow-xl: 0 24px 48px rgba(26, 22, 18, 0.08), 0 12px 24px rgba(26, 22, 18, 0.04);
    --shadow-brand: 0 8px 24px rgba(255, 107, 53, 0.20), 0 2px 8px rgba(255, 107, 53, 0.12);
    --shadow-brand-lg: 0 16px 40px rgba(255, 107, 53, 0.24), 0 4px 12px rgba(255, 107, 53, 0.16);
    --shadow-glow: 0 0 40px rgba(255, 167, 38, 0.3);
    
    /* 深色模式预定义 */
    --night-sky: #1A1A2E;
    --night-deep: #16213E;
    --moonlit-orange: #FF7043;
    --firefly: #FFB74D;
    
    /* 响应式断点 */
    --bp-mobile: 480px;
    --bp-tablet: 768px;
    --bp-laptop: 1024px;
    --bp-desktop: 1440px;
    --bp-wide: 1920px;
    
    /* 内容宽度令牌 */
    --content-narrow: 720px;
    --content-default: 960px;
    --content-wide: 1200px;
    --content-full: 100%;
    
    /* Section 间距 */
    --section-gap-sm: 80px;
    --section-gap-md: 120px;
    --section-gap-lg: 160px;
    
    /* 动画时长 */
    --duration-instant: 100ms;
    --duration-fast: 150ms;
    --duration-normal: 200ms;
    --duration-slow: 300ms;
    --duration-slower: 400ms;
    --duration-page: 500ms;
    
    /* z-index 层级体系 */
    --z-background: -1;
    --z-particles: 10;
    --z-content: 20;
    --z-card-hover: 25;
    --z-navbar: 100;
    --z-dropdown: 110;
    --z-modal: 200;
    --z-transition: 300;
    --z-toast: 400;
    --z-tooltip: 500;
    
    /* 圆角系统 */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-2xl: 24px;
    --radius-full: 9999px;
    
    /* 间距系统 */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;
    --spacing-3xl: 64px;
}

/* 深色模式已移除 */

/* ===== 字体系统 ===== */

@font-face {
    font-family: 'Smiley Sans';
    src: url('/fonts/SmileySans-Oblique.woff2') format('woff2');
    font-weight: normal;
    font-style: oblique;
    font-display: swap;
}

:root {
    --font-display: 'Smiley Sans', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
    --font-body: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'SF Mono', 'Cascadia Code', 'Fira Code', Consolas, monospace;
    
    /* 字号比例尺 — Major Third (1.25) */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.25rem;
    --text-xl: 1.5rem;
    --text-2xl: 2rem;
    --text-3xl: 2.5rem;
    --text-4xl: 3.5rem;
    --text-5xl: 5rem;
    --text-hero: clamp(3rem, 8vw, 7rem);
}

/* 缓动函数（供动画系统使用） */
:root {
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-elastic: cubic-bezier(0.16, 1, 0.3, 1);
}