/*
 * StockEngine 디자인 토큰
 * HyperEZ 디자인시스템(design-system/design-system.md) 기반, Skein 다크 시맨틱 토큰 차용.
 * 다크모드가 기본이며 시맨틱 토큰(--se-*)만 컴포넌트에서 사용한다.
 */

:root {
  /* Raw HyperEZ tokens */
  --hze-white: #ffffff;
  --hze-gray-50: #fafafa;
  --hze-gray-100: #f5f5f5;
  --hze-gray-200: #f0f0f0;
  --hze-gray-300: #d9d9d9;
  --hze-gray-400: #bfbfbf;
  --hze-gray-500: #8c8c8c;
  --hze-gray-600: #595959;
  --hze-gray-700: #323a3e;
  --hze-gray-800: #292f32;
  --hze-gray-900: #1f1f1f;
  --hze-gray-950: #141414;
  --hze-bi-01: #3a43ff;
  --hze-bi-02: #1a7eff;
  --hze-bi-03: #2576fe;
  --hze-bi-04: #ec4cff;
  --hze-bi-05: #8086ff;
  --hze-success: #53b9fc;
  --hze-error: #fc5f5f;
  --hze-primary-hover: #2830e6;
  --hze-gradient-bi: linear-gradient(90deg, #3a43ff, #1a7eff, #ec4cff, #8086ff, #3a43ff);

  /* Dark semantic tokens (default base) */
  color-scheme: dark;
  accent-color: var(--hze-bi-01);
  --se-bg: #0a0b0e;
  --se-bg-secondary: #0f1014;
  --se-surface: #15171c;
  --se-surface-muted: #1a1c23;
  --se-surface-subtle: #1f2229;
  --se-surface-selected: #262a35;
  --se-border: rgba(255, 255, 255, 0.08);
  --se-border-strong: rgba(255, 255, 255, 0.14);
  --se-text: #f5f6f8;
  --se-text-sub: #c5c8d1;
  --se-text-caption: #aab0bd;
  --se-text-muted: #7a7f8c;
  --se-text-faint: #5a5e6a;

  /* 투자 도메인 시맨틱: 국내 관례 (상승 빨강 / 하락 파랑) */
  --se-gain: #fc5f5f;
  --se-loss: #53b9fc;

  /* Elevation / focus */
  --se-shadow-card: 0 12px 40px rgba(0, 0, 0, 0.45);
  --se-shadow-dropdown: 0 4px 20px rgba(0, 0, 0, 0.5);
  --se-shadow-btn-primary: 0 6px 20px rgba(58, 67, 255, 0.35);
  --se-focus-ring: 0 0 0 3px rgba(58, 67, 255, 0.28);

  /* Radius */
  --se-radius-xs: 4px;
  --se-radius-sm: 8px;
  --se-radius-md: 12px;
  --se-radius-lg: 16px;

  /* Motion */
  --se-duration: 150ms;
  --se-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--se-bg-secondary);
  color: var(--se-text);
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 16px;
  line-height: 24px;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: rgba(58, 67, 255, 0.22);
  color: var(--se-text);
}

a {
  color: var(--hze-bi-05);
  text-decoration: none;
  transition: color var(--se-duration) var(--se-ease);
}

a:hover {
  color: var(--hze-bi-02);
}