/**
 * COSMO TECHS Brand Colors
 *
 * COSMOTECHS (코스모텍스) 브랜드 색상 시스템
 * 모든 COSMO 제품 페이지에서 공통으로 사용하는 색상 변수
 */

:root {
  /* ========================================
     Primary Brand Colors
     ======================================== */
  --cosmo-primary: #344d5e;
  --cosmo-primary-dark: #243a48;
  --cosmo-primary-light: #e8eef2;
  --cosmo-primary-rgb: 52, 77, 94;

  /* ========================================
     Secondary Colors
     ======================================== */
  --cosmo-secondary: #5a6d7c;
  --cosmo-secondary-dark: #475865;
  --cosmo-secondary-light: #f2f5f7;

  /* ========================================
     Semantic Colors
     ======================================== */
  --cosmo-success: #4a9a6a;
  --cosmo-warning: #e8a647;
  --cosmo-error: #d95a5a;
  --cosmo-info: #4a7a9a;

  /* ========================================
     Neutral Colors
     ======================================== */
  --cosmo-white: #ffffff;
  --cosmo-black: #000000;
  --cosmo-gray-50: #f8f9fa;
  --cosmo-gray-100: #f0f2f4;
  --cosmo-gray-200: #e6e8ea;
  --cosmo-gray-300: #d0d4d8;
  --cosmo-gray-400: #b0b6ba;
  --cosmo-gray-500: #90969a;
  --cosmo-gray-600: #70767a;
  --cosmo-gray-700: #50565a;
  --cosmo-gray-800: #30363a;
  --cosmo-gray-900: #1a1e20;

  /* ========================================
     Text Colors
     ======================================== */
  --cosmo-text-primary: #333333;
  --cosmo-text-secondary: #666666;
  --cosmo-text-tertiary: #999999;
  --cosmo-text-white: #ffffff;

  /* ========================================
     Background Colors
     ======================================== */
  --cosmo-bg-primary: #ffffff;
  --cosmo-bg-secondary: #f8f9fa;
  --cosmo-bg-accent: #e6f4f7;

  /* ========================================
     Border Colors
     ======================================== */
  --cosmo-border-light: #e6e8ea;
  --cosmo-border-medium: #d0d4d8;
  --cosmo-border-dark: #b0b6ba;

  /* ========================================
     Shadow Colors (with opacity)
     ======================================== */
  --cosmo-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
  --cosmo-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
  --cosmo-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.15);
  --cosmo-shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.2);

  /* ========================================
     Gradient Colors
     ======================================== */
  --cosmo-gradient-primary: linear-gradient(
    135deg,
    var(--cosmo-primary) 0%,
    var(--cosmo-primary-dark) 100%
  );
  --cosmo-gradient-light: linear-gradient(
    135deg,
    var(--cosmo-primary-light) 0%,
    var(--cosmo-white) 100%
  );
  --cosmo-gradient-card: linear-gradient(
    135deg,
    rgba(52, 77, 94, 0.2) 0%,
    rgba(36, 58, 72, 0.2) 100%
  );

  /* ========================================
     Legacy Accent Colors (for backward compatibility)
     Product/Chiba pages에서 사용하는 --accent 변수와 호환
     ======================================== */
  --accent: var(--cosmo-primary);
  --accent-dark: var(--cosmo-primary-dark);
  --accent-light: var(--cosmo-primary-light);
  --accent-rgb: var(--cosmo-primary-rgb);

  /* ========================================
     Overlay Colors (with opacity)
     ======================================== */
  --cosmo-overlay-light: rgba(255, 255, 255, 0.9);
  --cosmo-overlay-medium: rgba(255, 255, 255, 0.7);
  --cosmo-overlay-dark: rgba(0, 0, 0, 0.5);

  /* ========================================
     Hover & Active States
     ======================================== */
  --cosmo-hover-opacity: 0.8;
  --cosmo-active-opacity: 0.9;
  --cosmo-disabled-opacity: 0.5;
}

/* ========================================
   Dark Mode Support (Optional)
   ======================================== */
@media (prefers-color-scheme: dark) {
  :root {
    /* Dark mode 지원이 필요한 경우 여기에 추가 */
  }
}