/* ============================================
   VORS 在线商城 - CSS 变量定义
   配色方案：深色工业风
   ============================================ */

:root {
    /* 主色调 */
    --color-primary: #e63946;        /* 红色 - 主强调色 */
    --color-primary-hover: #c1121f;  /* 红色悬停态 */
    --color-secondary: #ff6b35;      /* 橙色 - 辅助强调色 */
    --color-secondary-hover: #e85d26;

    /* 背景色 */
    --color-bg-dark: #0d1117;        /* 最深背景 */
    --color-bg-main: #1a1f2e;        /* 主背景 */
    --color-bg-card: #222839;        /* 卡片背景 */
    --color-bg-card-hover: #2a3040;  /* 卡片悬停背景 */
    --color-bg-input: #161b26;       /* 输入框背景 */
    --color-bg-header: rgba(13, 17, 23, 0.95); /* 导航栏背景（半透明） */

    /* 文字色 */
    --color-text-primary: #ffffff;    /* 主文字 - 白色 */
    --color-text-secondary: #a0aec0; /* 次要文字 - 浅灰 */
    --color-text-muted: #6b7280;     /* 弱化文字 */
    --color-text-accent: #e63946;    /* 强调文字 */

    /* 边框 */
    --color-border: #2d3748;         /* 默认边框 */
    --color-border-hover: #e63946;   /* 悬停边框 */
    --color-border-light: rgba(255, 255, 255, 0.08); /* 轻边框 */

    /* 阴影 */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 20px rgba(230, 57, 70, 0.3); /* 红色光效 */
    --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.3);

    /* 字体 */
    --font-heading: 'Rajdhani', 'Noto Sans SC', sans-serif;
    --font-body: 'Noto Sans SC', sans-serif;
    --font-mono: 'Consolas', 'Monaco', monospace;

    /* 字号 */
    --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: 2rem;
    --text-4xl: 2.5rem;
    --text-5xl: 3.5rem;

    /* 间距 */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-4xl: 6rem;

    /* 圆角 */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    /* 过渡 */
    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* 布局 */
    --header-height: 70px;
    --container-max: 1280px;
    --sidebar-width: 280px;

    /* 渐变 */
    --gradient-hero: linear-gradient(135deg, rgba(13, 17, 23, 0.92) 0%, rgba(26, 31, 46, 0.85) 100%);
    --gradient-card: linear-gradient(145deg, var(--color-bg-card) 0%, rgba(34, 40, 57, 0.6) 100%);
    --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
}