/**
 * Design Tokens (CSS Custom Properties)
 * 
 * 这些变量必须在所有 @layer 之外定义
 * 以确保全局可用且不受 layer 优先级影响
 * 
 * ⚠️ 此文件导入时不能使用 layer() 语法
 */

:root {
    /* ==================== Primary Colors ==================== */
    --dh-primary: #00b67a;
    --dh-primary-dark: #009966;
    --dh-primary-light: #33c48f;
    --dh-primary-rgb: 0, 182, 122;
    
    /* ==================== Secondary Colors (Purple) ==================== */
    --dh-secondary: #5b0f70;
    --dh-secondary-dark: #48095a;
    --dh-secondary-light: #7a2d8f;
    --dh-secondary-rgb: 91, 15, 112;
    
    /* ==================== Accent Colors ==================== */
    --dh-accent: #ff6b35;
    --dh-accent-dark: #e55a25;
    --dh-accent-light: #ff8555;
    
    /* ==================== Groupon Green (组件专用) ==================== */
    --dh-gpn-green: #008920;
    --dh-gpn-green-hover: #006d1a;
    --dh-gpn-green-light: #e8f5e9;
    
    /* ==================== Groupon Pink (组件专用) ==================== */
    --dh-gpn-pink: #c31162;
    --dh-gpn-pink-light: #fde8f1;
    
    /* ==================== Groupon Purple (促销专用) ==================== */
    --dh-gpn-purple: #7b2cbf;
    --dh-gpn-purple-bg: #f4ebff;
    
    /* ==================== Neutral Colors ==================== */
    --dh-black: #1a1a1a;
    --dh-white: #ffffff;
    --dh-gray-900: #2d2d2d;
    --dh-gray-800: #3d3d3d;
    --dh-gray-700: #4f4f4f;
    --dh-gray-600: #6b6b6b;
    --dh-gray-500: #8a8a8a;
    --dh-gray-400: #ababab;
    --dh-gray-300: #d0d0d0;
    --dh-gray-200: #e5e5e5;
    --dh-gray-100: #f5f5f5;
    
    /* ==================== Semantic Colors ==================== */
    --dh-success: #22c55e;
    --dh-success-light: #dcfce7;
    --dh-warning: #f59e0b;
    --dh-warning-light: #fef3c7;
    --dh-error: #ef4444;
    --dh-error-light: #fee2e2;
    --dh-info: #3b82f6;
    --dh-info-light: #dbeafe;
    
    /* ==================== Typography ==================== */
    --dh-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    --dh-font-family-mono: 'SF Mono', 'Fira Code', Menlo, Monaco, Consolas, monospace;
    
    --dh-font-xs: 0.75rem;      /* 12px */
    --dh-font-sm: 0.875rem;     /* 14px */
    --dh-font-base: 1rem;       /* 16px */
    --dh-font-lg: 1.125rem;     /* 18px */
    --dh-font-xl: 1.25rem;      /* 20px */
    --dh-font-2xl: 1.5rem;      /* 24px */
    --dh-font-3xl: 1.875rem;    /* 30px */
    --dh-font-4xl: 2.25rem;     /* 36px */
    --dh-font-5xl: 3rem;        /* 48px */
    
    --dh-font-normal: 400;
    --dh-font-medium: 500;
    --dh-font-semibold: 600;
    --dh-font-bold: 700;
    
    --dh-leading-tight: 1.25;
    --dh-leading-normal: 1.5;
    --dh-leading-relaxed: 1.75;
    
    /* ==================== Spacing Scale ==================== */
    --dh-space-0: 0;
    --dh-space-1: 0.25rem;      /* 4px */
    --dh-space-2: 0.5rem;       /* 8px */
    --dh-space-3: 0.75rem;      /* 12px */
    --dh-space-4: 1rem;         /* 16px */
    --dh-space-5: 1.25rem;      /* 20px */
    --dh-space-6: 1.5rem;       /* 24px */
    --dh-space-8: 2rem;         /* 32px */
    --dh-space-10: 2.5rem;      /* 40px */
    --dh-space-12: 3rem;        /* 48px */
    --dh-space-16: 4rem;        /* 64px */
    --dh-space-20: 5rem;        /* 80px */
    --dh-space-24: 6rem;        /* 96px */
    --dh-space-2xl: 3rem;       /* 48px - alias */
    --dh-space-3xl: 4rem;       /* 64px - alias */
    --dh-space-xs: 0.25rem;     /* 4px - alias */
    
    /* ==================== Layout ==================== */
    --dh-container-sm: 640px;
    --dh-container-md: 768px;
    --dh-container-lg: 1024px;
    --dh-container-xl: 1200px;
    --dh-container-max: 1400px;
    --dh-container-padding: 24px;
    
    /* ==================== Border Radius ==================== */
    --dh-radius-sm: 4px;
    --dh-radius-md: 6px;
    --dh-radius-lg: 8px;
    --dh-radius-xl: 12px;
    --dh-radius-2xl: 16px;
    --dh-radius-full: 9999px;
    
    /* ==================== Shadows ==================== */
    --dh-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --dh-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --dh-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --dh-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --dh-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --dh-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    
    /* ==================== Transitions ==================== */
    --dh-transition-fast: 150ms;
    --dh-transition-normal: 250ms;
    --dh-transition-slow: 350ms;
    --dh-transition-base: 250ms ease;
    --dh-easing: cubic-bezier(0.4, 0, 0.2, 1);
    
    /* ==================== Z-Index Scale ==================== */
    --dh-z-dropdown: 100;
    --dh-z-sticky: 200;
    --dh-z-fixed: 300;
    --dh-z-modal-backdrop: 400;
    --dh-z-modal: 500;
    --dh-z-popover: 600;
    --dh-z-tooltip: 700;
    --dh-z-lightbox: 99999;
    
    /* ==================== Component-specific ==================== */
    --dh-header-height: 64px;
    --dh-header-bg: var(--dh-white);
    --dh-promo-bar-height: 40px;
}

/* ==================== Dark Mode Variables ==================== */
@media (prefers-color-scheme: dark) {
    :root.auto-dark-mode {
        --dh-black: #f5f5f5;
        --dh-gray-900: #e5e5e5;
        --dh-gray-800: #d0d0d0;
        --dh-gray-700: #ababab;
        --dh-gray-600: #8a8a8a;
        --dh-gray-500: #6b6b6b;
        --dh-gray-400: #4f4f4f;
        --dh-gray-300: #3d3d3d;
        --dh-gray-200: #2d2d2d;
        --dh-gray-100: #1a1a1a;
        --dh-white: #0f0f0f;
        --dh-header-bg: #1a1a1a;
    }
}