/**
 * 모듈트레이딩 디자인 시스템 토큰 (styles/tokens.css)
 * 4장 가이드 기준: 증권사 단말의 정밀함 + 절제된 에디토리얼
 */

:root {
  /* 라이트 테마 (기본) */
  --ink: #0f1c30;           /* 깊은 남색 (본문·헤더) */
  --ink-secondary: #4a5b73; /* 보조 텍스트 */
  --ink-muted: #7e8ea6;     /* 캡션, 비활성 텍스트 */
  --paper: #f7f9fc;         /* 아주 옅은 청회색 배경 */
  --surface: #ffffff;       /* 카드 및 섹션 표면 흰색 */
  --surface-alt: #eff3f8;   /* 보조 배경 표면 */
  --line: #e2e8f0;          /* 헤어라인 보더 */
  --line-strong: #cbd5e1;   /* 강조 보더 */
  --accent: #1d4ed8;        /* 절제된 코발트 블루 */
  --accent-hover: #1e40af;  /* 코발트 블루 호버 */
  --accent-soft: #eff6ff;   /* 코발트 블루 틴트 배경 */
  
  /* 국내 증시 관례 색상 (상승 빨강, 하락 파랑) */
  --up: #dc2626;            /* 상승 (빨강) */
  --up-soft: #fef2f2;       /* 상승 배경 */
  --down: #2563eb;          /* 하락 (파랑) */
  --down-soft: #eff6ff;     /* 하락 배경 */
  
  /* 타이포그래피 */
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, Menlo, Courier, monospace;
  
  /* 치수 및 간격 */
  --max-width: 1120px;
  --section-gap: 120px;
  --section-gap-mobile: 72px;
  --header-height: 64px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 9999px;
  
  /* 그림자 (절제된 단말 스타일) */
  --shadow-sm: 0 1px 2px rgba(15, 28, 48, 0.05);
  --shadow-md: 0 4px 12px rgba(15, 28, 48, 0.08);
}

/* 다크 모드 (prefers-color-scheme) */
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #f8fafc;
    --ink-secondary: #94a3b8;
    --ink-muted: #64748b;
    --paper: #0b0f19;
    --surface: #111827;
    --surface-alt: #1e293b;
    --line: #1e293b;
    --line-strong: #334155;
    --accent: #3b82f6;
    --accent-hover: #60a5fa;
    --accent-soft: rgba(59, 130, 246, 0.12);
    --up: #f87171;
    --up-soft: rgba(239, 68, 68, 0.15);
    --down: #60a5fa;
    --down-soft: rgba(59, 130, 246, 0.15);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  }
}

/* 수동 다크/라이트 테마 클래스 지원 */
html[data-theme="dark"] {
  --ink: #f8fafc;
  --ink-secondary: #94a3b8;
  --ink-muted: #64748b;
  --paper: #0b0f19;
  --surface: #111827;
  --surface-alt: #1e293b;
  --line: #1e293b;
  --line-strong: #334155;
  --accent: #3b82f6;
  --accent-hover: #60a5fa;
  --accent-soft: rgba(59, 130, 246, 0.12);
  --up: #f87171;
  --up-soft: rgba(239, 68, 68, 0.15);
  --down: #60a5fa;
  --down-soft: rgba(59, 130, 246, 0.15);
}

html[data-theme="light"] {
  --ink: #0f1c30;
  --ink-secondary: #4a5b73;
  --ink-muted: #7e8ea6;
  --paper: #f7f9fc;
  --surface: #ffffff;
  --surface-alt: #eff3f8;
  --line: #e2e8f0;
  --line-strong: #cbd5e1;
  --accent: #1d4ed8;
  --accent-hover: #1e40af;
  --accent-soft: #eff6ff;
  --up: #dc2626;
  --up-soft: #fef2f2;
  --down: #2563eb;
  --down-soft: #eff6ff;
}