/*
 * Myanmar Electronics Store - Global Color System
 * 缅甸电器电商网站 - 统一色彩变量系统
 */

/* CSS Custom Properties for Colors */
:root {
  /* Primary Brand Colors - Myanmar Gold */
  --color-primary: #D4AF37;          /* 缅甸金色 - 主色调 */
  --color-primary-light: #E6C75E;     /* 浅金色 */
  --color-primary-dark: #B8941F;      /* 深金色 */

  /* Secondary Colors - Myanmar Red */
  --color-secondary: #C8102E;        /* 缅甸红色 - 辅助色/CTA */
  --color-secondary-light: #DC2F3E;   /* 亮红色 */
  --color-secondary-dark: #A00D24;    /* 深红色 */
  --color-secondary-hover: #8D0B20;  /* 悬停红色 */

  /* Accent Colors - Deep Blue Gray */
  --color-accent: #3D5A80;          /* 深蓝灰色 - 强调色 */
  --color-accent-light: #6B8CAE;     /* 浅蓝灰 */
  --color-accent-dark: #2C3E50;      /* 深蓝灰 */

  /* Warm Colors - Sand Brown */
  --color-warm: #F4A460;             /* 沙棕色 - 装饰色 */
  --color-warm-light: #F8B88B;        /* 浅沙棕 */
  --color-warm-dark: #E9967A;        /* 深沙棕 */

  /* Myanmar Theme Colors */
  --color-myanmar-gold: #FFD700;     /* 金色 */
  --color-myanmar-red: #FF0000;      /* 缅甸红 */
  --color-myanmar-green: #00A650;     /* 缅甸绿 */
  --color-myanmar-cream: #FFF8DC;    /* 奶油色 */

  /* Background Colors */
  --color-light: #F8F9FA;            /* 浅灰背景 */
  --color-lighter: #FFFFFF;           /* 纯白 */
  --color-gray-50: #F9FAFB;           /* 极浅灰 */
  --color-gray-100: #F3F4F6;         /* 浅灰 */
  --color-gray-200: #E5E7EB;         /* 中浅灰 */
  --color-gray-300: #D1D5DB;         /* 中灰 */
  --color-gray-400: #9CA3AF;         /* 浅灰文字 */
  --color-gray-500: #6B7280;         /* 中灰文字 */
  --color-gray-600: #4B5563;         /* 深灰文字 */
  --color-gray-700: #374151;         /* 深灰 */
  --color-gray-800: #1F2937;         /* 极深灰 */
  --color-gray-900: #111827;         /* 黑色 */

  /* Status Colors */
  --color-success: #10B981;          /* 绿色 - 成功/库存 */
  --color-success-light: #34D399;     /* 浅绿 */
  --color-warning: #F59E0B;           /* 黄色 - 警告 */
  --color-error: #EF4444;             /* 红色 - 错误/折扣 */
  --color-error-light: #F87171;       /* 浅红 */

  /* Text Colors */
  --color-text-primary: #1F2937;     /* 主要文字 */
  --color-text-secondary: #6B7280;    /* 次要文字 */
  --color-text-light: #9CA3AF;        /* 浅色文字 */
  --color-text-white: #FFFFFF;        /* 白色文字 */

  /* Border Colors */
  --color-border-light: #E5E7EB;      /* 浅边框 */
  --color-border-medium: #D1D5DB;     /* 中等边框 */
  --color-border-dark: #9CA3AF;       /* 深边框 */

  /* Shadow Colors */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

  /* Color Gradients */
  --gradient-primary: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
  --gradient-secondary: linear-gradient(135deg, var(--color-secondary), var(--color-secondary-light));
  --gradient-accent: linear-gradient(135deg, var(--color-accent), var(--color-accent-light));
  --gradient-kitchen: linear-gradient(135deg, var(--color-kitchen-cream), var(--color-light));
}

/* Dark Mode Colors (Future Enhancement) */
@media (prefers-color-scheme: dark) {
  :root {
    --color-text-primary: #F9FAFB;
    --color-text-secondary: #D1D5DB;
    --color-light: #1F2937;
    --color-lighter: #111827;
  }
}

/* Utility Classes for Easy Access */
.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.text-accent { color: var(--color-accent); }
.text-warm { color: var(--color-warm); }

.bg-primary { background-color: var(--color-primary); }
.bg-secondary { background-color: var(--color-secondary); }
.bg-accent { background-color: var(--color-accent); }
.bg-warm { background-color: var(--color-warm); }
.bg-light { background-color: var(--color-light); }
.bg-lighter { background-color: var(--color-lighter); }
.bg-kitchen-cream { background-color: var(--color-kitchen-cream); }

.border-primary { border-color: var(--color-primary); }
.border-secondary { border-color: var(--color-secondary); }
.border-accent { border-color: var(--color-accent); }

.hover\:bg-primary:hover { background-color: var(--color-primary); }
.hover\:bg-secondary:hover { background-color: var(--color-secondary); }
.hover\:bg-accent:hover { background-color: var(--color-accent); }

.hover\:text-primary:hover { color: var(--color-primary); }
.hover\:text-secondary:hover { color: var(--color-secondary); }
.hover\:text-accent:hover { color: var(--color-accent); }