/* ==========================================================================
   Design System - Colors
   모든 색상은 이 변수들을 사용해야 합니다.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------------------
     Primary Colors - 브랜드 색상
     --------------------------------------------------------------------------- */
  --color-primary: #007AFF;
  --color-primary-hover: #0056CC;
  --color-primary-light: #E3F2FD;

  /* ---------------------------------------------------------------------------
     Text Colors - 텍스트 색상
     --------------------------------------------------------------------------- */
  --color-text-primary: #2D2D2D;
  --color-text-secondary: #8D8A86;
  --color-text-muted: #8D8A86;
  --color-text-inverse: #FFFFFF;
  --color-fill-dark: #2D2D2D;

  /* ---------------------------------------------------------------------------
     Background Colors - 배경 색상
     --------------------------------------------------------------------------- */
  --color-bg-primary: #FFFFFF;
  --color-bg-secondary: #FFFFFF;
  --color-bg-tertiary: #E8E8E8;
  --color-bg-white: #FFFFFF;
  --color-card-fill: #F7F7F5;
  --color-card-fill-active: #EEEEEC;
  --color-bg-overlay: rgba(0, 0, 0, 0.5);
  --color-bg-glass: rgba(255, 255, 255, 0.9);
  --color-bg-glass-light: rgba(255, 255, 255, 0.35);
  --color-bg-glass-card: rgba(255, 255, 255, 0.75);

  /* ---------------------------------------------------------------------------
     Border Colors - 테두리 색상
     --------------------------------------------------------------------------- */
  --color-border-soft: #E0E0DE;
  --color-border-light: #FFFFFF;
  --color-glass-border: #FFFFFF;

  /* ---------------------------------------------------------------------------
     State Colors - 상태 색상
     --------------------------------------------------------------------------- */
  --color-success: #22C55E;
  --color-success-light: #DCFCE7;
  --color-warning: #EE3124;
  --color-warning-light: #FEE2E2;
  --color-danger: #EF4444;
  --color-danger-light: #FEE2E2;
  --color-info: #4A90D9;
  --color-info-light: #E3F2FD;

  /* ---------------------------------------------------------------------------
     Accent Colors - 강조 색상
     --------------------------------------------------------------------------- */
  --color-accent-red: #FF3B30;
  --color-accent-blue: #4A90D9;
  --color-accent-orange: #FF6B35;
  --color-accent-orange-light: rgba(255, 107, 53, 0.1);
  --color-accent-purple: #9C27B0;
  --color-accent-purple-light: #F3E5F5;
  --color-accent-green: #4CAF50;

  /* ---------------------------------------------------------------------------
     Caution Colors - 주의 색상 (amber)
     --------------------------------------------------------------------------- */
  --color-caution: #D97706;
  --color-caution-light: #FEF3C7;
  --color-caution-text: #92400E;
  --color-caution-border: #FDE68A;

  /* ---------------------------------------------------------------------------
     Additional State Shades
     --------------------------------------------------------------------------- */
  --color-danger-text: #DC2626;
  --color-danger-border: #FECACA;
  --color-danger-bg: #FFEBEE;
  --color-success-text: #2E7D32;
  --color-success-bg: #E8F5E9;
  --color-warning-icon: #FF9800;

  /* ---------------------------------------------------------------------------
     Gray Shades - 그레이 색상
     --------------------------------------------------------------------------- */
  --color-gray-100: #F5F5F5;
  --color-gray-200: #E0E0E0;
  --color-gray-900: #000000;

  /* ---------------------------------------------------------------------------
     Avatar/Profile - 아바타 관련 색상
     --------------------------------------------------------------------------- */
  --color-avatar-gradient: #ECEBE8;
  --color-avatar-gradient-start: #ECEBE8;
  --color-avatar-gradient-end: #ECEBE8;
  --color-avatar-placeholder: #ECEBE8;
  --color-avatar-text: var(--color-text-secondary);
  /* Legacy alias - use --color-project-gradient instead */
  --color-challenge-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --color-warning-subtle: #FFF7ED;

  /* Avatar Placeholder Colors - 아바타 플레이스홀더 색상 */
  --color-avatar-pink: #FFB6C1;
  --color-avatar-mint: #98D8C8;
  --color-avatar-yellow: #F7DC6F;
  --color-avatar-purple: #BB8FCE;
  --color-avatar-blue: #85C1E9;

  /* ---------------------------------------------------------------------------
     Overlay Colors - 오버레이 색상
     --------------------------------------------------------------------------- */
  --color-overlay-dark: rgba(0, 0, 0, 0.6);
  --color-overlay-light: rgba(255, 255, 255, 0.9);
  --color-hover-subtle: rgba(0, 0, 0, 0.05);
  --color-badge-bg: rgba(0, 0, 0, 0.1);
  --color-badge-bg-inverted: rgba(255, 255, 255, 0.2);
  --color-danger-subtle: rgba(239, 68, 68, 0.1);
  --color-warning-subtle-bg: rgba(255, 100, 23, 0.08);
  --color-warning-hover-bg: rgba(255, 100, 23, 0.15);
  --color-warning-shadow: rgba(255, 100, 23, 0.2);
  --color-warning-border: rgba(255, 100, 23, 0.3);
  --color-notification-unread: rgba(255, 100, 23, 0.05);
  --color-selection-subtle: rgba(39, 40, 43, 0.08);

  /* ---------------------------------------------------------------------------
     Project/Challenge Colors - 프로젝트 색상
     --------------------------------------------------------------------------- */
  --color-project-purple: #ECEBE8;
  --color-project-pink: #ECEBE8;
  --color-project-gradient: #ECEBE8;
  --color-group-project-gradient: #ECEBE8;

  /* ---------------------------------------------------------------------------
     Premium Colors - 프리미엄 CTA 색상
     --------------------------------------------------------------------------- */
  --color-premium-gradient: linear-gradient(135deg, #F5F5F5 0%, #E8E8E8 50%, #D4D4D4 100%);
  --color-premium-accent: #1A1A1A;
  --color-premium-accent-subtle: rgba(0, 0, 0, 0.08);
  --color-premium-title: #0A0A0A;
  --color-premium-desc: #404040;

  /* ---------------------------------------------------------------------------
     Legacy Aliases (하위 호환성 유지)
     --------------------------------------------------------------------------- */
  --bg-main: var(--color-bg-primary);
  --bg-card: var(--color-bg-secondary);
  --border-soft: var(--color-border-soft);
  --text-main: var(--color-text-primary);
  --text-sub: var(--color-text-secondary);
  --text-muted: var(--color-text-muted);
  --white: var(--color-bg-white);
  --accent-red: var(--color-accent-red);
  --accent-blue: var(--color-accent-blue);
  --together-avatar-gradient: var(--color-avatar-gradient);
  --together-warning: var(--color-warning);
}

/* ==========================================================================
   Dark Mode Overrides
   ========================================================================== */

html.dark {
  /* Text Colors */
  --color-text-primary: #F0EDE8;
  --color-text-secondary: #9C9895;
  --color-text-muted: #6B6764;
  --color-text-inverse: #FFFFFF;
  --color-fill-dark: #2A2A2A;

  /* Background Colors */
  --color-bg-primary: #121212;
  --color-bg-secondary: #121212;
  --color-bg-tertiary: #2A2A2A;
  --color-bg-white: #121212;
  --color-card-fill: #1A1A1A;
  --color-card-fill-active: #222222;
  --color-bg-overlay: rgba(0, 0, 0, 0.7);
  --color-bg-glass: rgba(30, 30, 30, 0.92);
  --color-bg-glass-light: rgba(255, 255, 255, 0.06);
  --color-bg-glass-card: rgba(30, 30, 30, 0.85);

  /* Border Colors */
  --color-border-soft: rgba(255, 255, 255, 0.08);
  --color-border-light: rgba(255, 255, 255, 0.06);
  --color-glass-border: rgba(255, 255, 255, 0.06);

  /* Gray Shades */
  --color-gray-100: #2A2A2A;
  --color-gray-200: #3A3A3A;
  --color-gray-900: #F0EDE8;

  /* Avatar */
  --color-avatar-gradient: #ECEBE8;
  --color-avatar-gradient-start: #ECEBE8;
  --color-avatar-gradient-end: #ECEBE8;
  --color-avatar-placeholder: #ECEBE8;
  --color-avatar-text: var(--color-text-secondary);

  /* Overlays */
  --color-overlay-light: rgba(30, 30, 30, 0.9);
  --color-hover-subtle: rgba(255, 255, 255, 0.05);
  --color-badge-bg: rgba(255, 255, 255, 0.1);
  --color-selection-subtle: rgba(255, 255, 255, 0.08);

  /* Accent light (brighter on dark bg) */
  --color-accent-orange-light: rgba(255, 107, 53, 0.15);

  /* State Colors (brighter for dark backgrounds) */
  --color-success: #4ADE80;
  --color-danger: #F87171;
  --color-warning: #EE3124;
  --color-caution-text: #FCD34D;
  --color-caution-light: #422006;

  /* Shadows (subtle glow instead of dark shadow) */
  --shadow-soft: 0 0 10px rgba(0, 0, 0, 0.3);
  --shadow-soft-warm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-dropdown: 0 4px 20px rgba(0, 0, 0, 0.4);
  --shadow-modal: 0 -4px 20px rgba(0, 0, 0, 0.4);
  --shadow-glass: 0 2px 10px rgba(0, 0, 0, 0.3);
  --shadow-glass-elevated: 0 6px 30px rgba(0, 0, 0, 0.4);

  /* Premium Colors - dark card with light text */
  --color-premium-gradient: linear-gradient(135deg, #2A2A2A 0%, #222222 50%, #1A1A1A 100%);
  --color-premium-accent: #F0EDE8;
  --color-premium-accent-subtle: rgba(255, 255, 255, 0.1);
  --color-premium-title: #F0EDE8;
  --color-premium-desc: #9C9895;
}