/* Nerd Technic 青綠風格設計系統 - 統一變數定義 */
:root {
    /* 主要色彩 */
    --primary: #00F5D4;
    --secondary: #00D4AA;
    --accent: #00E5C0;
    --dark: #0f172a;
    --darker: #020617;
    --light: #ffffff;
    
    /* 文字色彩 */
    --text-primary: #1e293b;
    --text-secondary: rgba(30, 41, 59, 0.8);
    --text-muted: rgba(30, 41, 59, 0.6);
    --text-light: rgba(255, 255, 255, 0.9);
    
    /* 功能色彩 */
    --success: #00F5D4;
    --warning: #FFA500;
    --danger: #FF6B6B;
    --info: #00D4F5;
    
    /* 漸變效果 */
    --gradient-primary: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    --gradient-hero: linear-gradient(135deg, #f0fdfa 0%, #ccfbf1 50%, #99f6e4 100%);
    --gradient-beacon: linear-gradient(135deg, #0891b2 0%, #0e7490 50%, #155e75 100%);
    --gradient-dark: linear-gradient(135deg, var(--dark) 0%, var(--darker) 100%);
    --gradient-light: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    
    /* 陰影效果 */
    --shadow-glow: 0 10px 30px rgba(0, 245, 212, 0.4), 0 0 20px rgba(0, 245, 212, 0.2);
    --neon-glow: 0 0 10px rgba(0, 245, 212, 0.8), 0 0 20px rgba(0, 245, 212, 0.4), 0 0 30px rgba(0, 245, 212, 0.2);
    --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.1);
    --shadow-medium: 0 8px 30px rgba(0, 0, 0, 0.15);
    --shadow-strong: 0 15px 40px rgba(0, 0, 0, 0.2);
    
    /* RGB 值（用於 rgba 函數） */
    --primary-rgb: 0, 245, 212;
    --secondary-rgb: 0, 212, 170;
    --text-primary-rgb: 30, 41, 59;
    --text-secondary-rgb: 127, 140, 141;
    --text-light-rgb: 236, 240, 241;
    
    /* 圓角系統 */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 24px;
    --radius-full: 9999px;
    
    /* 間距系統 */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    --spacing-2xl: 4rem;
    --spacing-3xl: 6rem;
    
    /* 字體大小系統 */
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    --font-size-5xl: 3rem;
    --font-size-6xl: 3.75rem;
    
    /* 字體粗細系統 */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --font-weight-black: 900;
    
    /* 過渡動畫系統 */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
    --transition-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --transition-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Z-index 層級系統 */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    --z-toast: 1080;
    
    /* 容器寬度 */
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1280px;
    --container-2xl: 1400px;
    
    /* 網格間距 */
    --grid-gap-sm: 1rem;
    --grid-gap-md: 1.5rem;
    --grid-gap-lg: 2rem;
    --grid-gap-xl: 3rem;
    
    /* 邊框系統 */
    --border-width-thin: 1px;
    --border-width-normal: 2px;
    --border-width-thick: 3px;
    --border-color-light: rgba(0, 245, 212, 0.1);
    --border-color-normal: rgba(0, 245, 212, 0.2);
    --border-color-strong: rgba(0, 245, 212, 0.3);
    
    /* 背景模糊 */
    --backdrop-blur-sm: 4px;
    --backdrop-blur-md: 8px;
    --backdrop-blur-lg: 16px;
    --backdrop-blur-xl: 24px;
}