/* =============================================
   HyunYul AI Design Tokens (Main Screen Refresh)
   Scope: Tokens only. Do not include structural rules here.
   ============================================= */

:root {
  /* Color palette tuned for higher legibility while keeping brand hue */
  --bg: #f6f7ff;
  --bg-elev: #ffffff;
  --text: #1c1f3b;
  --text-muted: #565b7a;
  --primary: #6a55ff;
  --primary-contrast: #ffffff;
  --border: rgba(28, 31, 59, 0.12);
  --shadow-rgb: 72, 64, 144;

  /* Typography scale */
  --font-sans: 'Pretendard Variable', 'Pretendard', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --fs-xxl: clamp(2.25rem, 3.5vw, 3rem);
  --fs-xl: clamp(1.75rem, 3vw, 2.25rem);
  --fs-lg: 1.25rem; /* 20px */
  --fs-md: 1rem;    /* 16px */
  --fs-sm: 0.875rem;/* 14px */

  /* Font weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Core spacing tokens */
  --space-2: 0.5rem;  /* 8px */
  --space-3: 0.75rem; /* 12px */
  --space-4: 1rem;    /* 16px */
  --space-6: 1.5rem;  /* 24px */
  --space-8: 2rem;    /* 32px */

  /* Radii, borders, shadows */
  --radius-2: 0.75rem; /* 12px */
  --radius-3: 1rem;    /* 16px */
  --border-1: 1px solid var(--border);
  --shadow-1: 0 6px 20px rgba(var(--shadow-rgb), 0.08);

  /* Container max-width */
  --container-max: 800px;  /* 입력창 최대 너비 */
}

/* Map legacy tokens so existing components adopt refreshed palette */
:root {
  --bg-primary: var(--bg);
  --bg-secondary: color-mix(in srgb, var(--bg) 60%, #ffffff 40%);
  --bg-tertiary: color-mix(in srgb, var(--bg-elev) 90%, rgba(255, 255, 255, 0.4) 10%);
  --bg-chat: var(--bg-elev); /* (★중요) 메시지 버블 배경 */

  --text-primary: var(--text);
  --text-secondary: color-mix(in srgb, var(--text) 70%, #ffffff 30%);
  --text-tertiary: color-mix(in srgb, var(--text-muted) 80%, #ffffff 20%);
  --text-placeholder: color-mix(in srgb, var(--text-muted) 60%, #ffffff 40%);

  --border-primary: var(--border);
  --border-secondary: rgba(28, 31, 59, 0.18);
  --border-color: var(--border-primary);

  --sidebar-bg: var(--bg-elev);
  --sidebar-hover: rgba(106, 85, 255, 0.06);
  --sidebar-active: rgba(106, 85, 255, 0.12);
  --sidebar-text: var(--text-muted);

  --primary-color: var(--primary);
  --primary-500: var(--primary);
  --primary-600: color-mix(in srgb, var(--primary) 85%, #3726a7 15%);
  --primary-dark: color-mix(in srgb, var(--primary) 85%, #3726a7 15%);
  --error-color: #ef4444;
  --success-color: #10b981; /* ★추가: 복사 버튼 녹색 배경 */
  --hover-bg: rgba(106, 85, 255, 0.08);
  --shadow-xl: var(--shadow-1);
  --input-border: var(--border);
  --input-focus: var(--primary);
}

[data-theme="light"] {
  color-scheme: light;
}

[data-theme="dark"] {
  /* OpenAI 다크 모드 계열 색상에 맞춘 팔레트 */
  --bg: #343541;
  --bg-elev: #40414f;
  --text: #f7f7f8;
  --text-muted: #c5c6d3;
  --primary: #10a37f;
  --primary-contrast: #ffffff;
  --border: #565869;
  --shadow-rgb: 12, 13, 20;
}

[data-theme="dark"] {
  --bg-primary: var(--bg);
  --bg-secondary: #3b3d4a;
  --bg-tertiary: #4a4b59;
  --bg-chat: #444654; /* OpenAI 스타일 어시스턴트 버블 */

  --text-primary: var(--text);
  --text-secondary: #d1d1e0;
  --text-tertiary: #b1b3c7;
  --text-placeholder: #8e90a3;

  --border-primary: var(--border);
  --border-secondary: #6b6d79;
  --border-color: var(--border-primary);

  --sidebar-bg: #3a3c49;
  --sidebar-hover: rgba(16, 163, 127, 0.14);
  --sidebar-active: rgba(16, 163, 127, 0.24);
  --sidebar-text: #d1d1e0;

  --primary-color: var(--primary);
  --primary-500: var(--primary);
  --primary-600: color-mix(in srgb, var(--primary) 80%, #0b8a68 20%);
  --primary-dark: color-mix(in srgb, var(--primary) 80%, #0b8a68 20%);
  --error-color: #f87171;
  --success-color: #34d399; /* 다크모드 복사 버튼 녹색 */
  --hover-bg: rgba(16, 163, 127, 0.18);
  --shadow-xl: 0 20px 45px rgba(var(--shadow-rgb), 0.45);
  --input-border: var(--border);
  --input-focus: var(--primary);
  --scrollbar-track: rgba(148, 163, 184, 0.12);
  --scrollbar-thumb: rgba(148, 163, 184, 0.35);
  --scrollbar-thumb-hover: rgba(226, 232, 240, 0.55);
}