/* src/design-system/tokens/semantic.css */
/* 시맨틱 토큰 (테마에 따라 변경됨) */

/* Light Mode (기본) */
:root {
  color-scheme: light;

  /* Brand - Primary Brand Color */
  --brand-primary: var(--palette-blue-600);
  --brand-primary-hover: var(--palette-blue-700);
  --brand-primary-active: var(--palette-blue-800);

  /* Text Colors */
  --text-primary: var(--palette-gray-900);
  --text-secondary: var(--palette-gray-500);
  --text-tertiary: var(--palette-gray-400);
  --text-disabled: var(--palette-gray-300);
  --text-inverse: #FFFFFF;
  --text-link: var(--palette-blue-600);
  --text-link-hover: var(--palette-blue-700);
  --text-success: var(--palette-green-700);
  --text-warning: var(--palette-yellow-700);
  --text-error: var(--palette-red-700);
  --text-info: var(--palette-cyan-700);

  /* Background Colors */
  --bg-primary: #FFFFFF;
  --bg-secondary: var(--palette-gray-50);
  --bg-tertiary: var(--palette-gray-100);
  --bg-inverse: var(--palette-gray-900);
  --bg-overlay: rgba(0, 0, 0, 0.5);
  --bg-dimmed: rgba(0, 0, 0, 0.05);

  /* Surface Colors (카드, 패널, 모달 등) */
  --surface-default: #FFFFFF;
  --surface-raised: #FFFFFF;
  --surface-sunken: var(--palette-gray-50);
  --surface-overlay: #FFFFFF;
  --surface-hover: var(--palette-gray-50);
  --surface-active: var(--palette-gray-100);

  /* Border Colors */
  --border-subtle: var(--palette-gray-100);
  --border-default: var(--palette-gray-200);
  --border-strong: var(--palette-gray-300);
  --border-inverse: var(--palette-gray-700);
  --border-focus: var(--palette-blue-600);

  /* Interactive Colors (버튼, 링크 등) */
  --interactive-primary: var(--palette-blue-600);
  --interactive-primary-hover: var(--palette-blue-700);
  --interactive-primary-active: var(--palette-blue-800);
  --interactive-secondary: var(--palette-gray-200);
  --interactive-secondary-hover: var(--palette-gray-300);
  --interactive-secondary-active: var(--palette-gray-400);
  --interactive-disabled: var(--palette-gray-300);
  --interactive-disabled-text: var(--palette-gray-400);

  /* Status Colors */
  --status-success: var(--palette-green-500);
  --status-success-bg: var(--palette-green-50);
  --status-success-border: var(--palette-green-500);
  --status-warning: var(--palette-yellow-500);
  --status-warning-bg: var(--palette-yellow-50);
  --status-warning-border: var(--palette-yellow-500);
  --status-error: var(--palette-red-500);
  --status-error-bg: var(--palette-red-50);
  --status-error-border: var(--palette-red-500);
  --status-info: var(--palette-cyan-500);
  --status-info-bg: var(--palette-cyan-50);
  --status-info-border: var(--palette-cyan-500);

  /* Shadow */
  --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);
}

/* Dark Mode - 시스템 설정 따르기 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;

    /* Brand */
    --brand-primary: var(--palette-blue-400);
    --brand-primary-hover: var(--palette-blue-300);
    --brand-primary-active: var(--palette-blue-200);

    /* Text Colors */
    --text-primary: var(--palette-gray-50);
    --text-secondary: var(--palette-gray-300);
    --text-tertiary: var(--palette-gray-400);
    --text-disabled: var(--palette-gray-600);
    --text-inverse: var(--palette-gray-900);
    --text-link: var(--palette-blue-400);
    --text-link-hover: var(--palette-blue-300);
    --text-success: var(--palette-green-300);
    --text-warning: var(--palette-yellow-300);
    --text-error: var(--palette-red-300);
    --text-info: var(--palette-cyan-300);

    /* Background Colors */
    --bg-primary: var(--palette-dark-300);
    --bg-secondary: var(--palette-dark-200);
    --bg-tertiary: var(--palette-dark-100);
    --bg-inverse: var(--palette-gray-50);
    --bg-overlay: rgba(0, 0, 0, 0.7);
    --bg-dimmed: rgba(255, 255, 255, 0.05);

    /* Surface Colors */
    --surface-default: var(--palette-dark-200);
    --surface-raised: var(--palette-dark-100);
    --surface-sunken: var(--palette-dark-300);
    --surface-overlay: var(--palette-dark-50);
    --surface-hover: var(--palette-dark-100);
    --surface-active: var(--palette-dark-50);

    /* Border Colors */
    --border-subtle: var(--palette-dark-50);
    --border-default: var(--palette-gray-700);
    --border-strong: var(--palette-gray-600);
    --border-inverse: var(--palette-gray-300);
    --border-focus: var(--palette-blue-400);

    /* Interactive Colors */
    --interactive-primary: var(--palette-blue-700);
    --interactive-primary-hover: var(--palette-blue-300);
    --interactive-primary-active: var(--palette-blue-200);
    --interactive-secondary: var(--palette-gray-700);
    --interactive-secondary-hover: var(--palette-gray-600);
    --interactive-secondary-active: var(--palette-gray-500);
    --interactive-disabled: var(--palette-gray-700);
    --interactive-disabled-text: var(--palette-gray-600);

    /* Status Colors */
    --status-success: var(--palette-green-300);
    --status-success-bg: var(--palette-green-900);
    --status-success-border: var(--palette-green-500);
    --status-warning: var(--palette-yellow-300);
    --status-warning-bg: var(--palette-yellow-900);
    --status-warning-border: var(--palette-yellow-500);
    --status-error: var(--palette-red-300);
    --status-error-bg: var(--palette-red-900);
    --status-error-border: var(--palette-red-500);
    --status-info: var(--palette-cyan-300);
    --status-info-bg: var(--palette-cyan-900);
    --status-info-border: var(--palette-cyan-500);

    /* Shadow */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 10px 10px -5px rgba(0, 0, 0, 0.5);
  }
}

/* Dark Mode - 사용자 수동 선택 */
:root[data-theme="dark"] {
  color-scheme: dark;

  /* Brand */
  --brand-primary: var(--palette-blue-400);
  --brand-primary-hover: var(--palette-blue-300);
  --brand-primary-active: var(--palette-blue-200);

  /* Text Colors */
  --text-primary: var(--palette-gray-50);
  --text-secondary: var(--palette-gray-300);
  --text-tertiary: var(--palette-gray-400);
  --text-disabled: var(--palette-gray-600);
  --text-inverse: var(--palette-gray-900);
  --text-link: var(--palette-blue-400);
  --text-link-hover: var(--palette-blue-300);
  --text-success: var(--palette-green-300);
  --text-warning: var(--palette-yellow-300);
  --text-error: var(--palette-red-300);
  --text-info: var(--palette-cyan-300);

  /* Background Colors */
  --bg-primary: var(--palette-dark-300);
  --bg-secondary: var(--palette-dark-200);
  --bg-tertiary: var(--palette-dark-100);
  --bg-inverse: var(--palette-gray-50);
  --bg-overlay: rgba(0, 0, 0, 0.7);
  --bg-dimmed: rgba(255, 255, 255, 0.05);

  /* Surface Colors */
  --surface-default: var(--palette-dark-200);
  --surface-raised: var(--palette-dark-100);
  --surface-sunken: var(--palette-dark-300);
  --surface-overlay: var(--palette-dark-50);
  --surface-hover: var(--palette-dark-100);
  --surface-active: var(--palette-dark-50);

  /* Border Colors */
  --border-subtle: var(--palette-dark-50);
  --border-default: var(--palette-gray-700);
  --border-strong: var(--palette-gray-600);
  --border-inverse: var(--palette-gray-300);
  --border-focus: var(--palette-blue-400);

  /* Interactive Colors */
  --interactive-primary: var(--palette-blue-700);
  --interactive-primary-hover: var(--palette-blue-300);
  --interactive-primary-active: var(--palette-blue-200);
  --interactive-secondary: var(--palette-gray-700);
  --interactive-secondary-hover: var(--palette-gray-600);
  --interactive-secondary-active: var(--palette-gray-500);
  --interactive-disabled: var(--palette-gray-700);
  --interactive-disabled-text: var(--palette-gray-600);

  /* Status Colors */
  --status-success: var(--palette-green-300);
  --status-success-bg: var(--palette-green-900);
  --status-success-border: var(--palette-green-500);
  --status-warning: var(--palette-yellow-300);
  --status-warning-bg: var(--palette-yellow-900);
  --status-warning-border: var(--palette-yellow-500);
  --status-error: var(--palette-red-300);
  --status-error-bg: var(--palette-red-900);
  --status-error-border: var(--palette-red-500);
  --status-info: var(--palette-cyan-300);
  --status-info-bg: var(--palette-cyan-900);
  --status-info-border: var(--palette-cyan-500);

  /* Shadow */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 10px 10px -5px rgba(0, 0, 0, 0.5);
}

/* Light Mode - 사용자 수동 선택 (기본값 유지) */
:root[data-theme="light"] {
  color-scheme: light;
}