/* ============================================================================
   디자인 토큰 — 색·타이포·간격의 단일 출처
   ----------------------------------------------------------------------------
   이 파일이 모든 화면의 색을 결정한다. 화면 파일에 색을 직접 쓰지 않는다.
   (예전에는 dashboard/public에 색이 각각 하드코딩돼 한쪽만 바뀌는 일이 잦았다)

   테마 : html[data-theme="dark"|"light"] 로 전환. 미지정 시 시스템 설정을 따른다.
   품목 : html[data-item="SILVER"|"WTI"…] 로 악센트가 바뀐다.
          지금 어떤 상품을 보고 있는지 색으로 즉시 알 수 있게 하는 장치.
   ========================================================================= */

:root {
  /* ── 타이포 ─────────────────────────────────────────────
     숫자는 등폭으로 자릿수를 정렬한다. 가격·레벨 비교가 이 화면의 본업이라
     정렬이 흐트러지면 읽는 속도가 눈에 띄게 떨어진다. */
  --font-ui: 'Pretendard Variable', Pretendard, -apple-system,
             BlinkMacSystemFont, system-ui, 'Segoe UI', sans-serif;
  --font-num: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;

  --fs-display: 1.75rem;   /* 화면 제목 */
  --fs-title:   1.05rem;   /* 카드 제목 */
  --fs-body:    0.92rem;
  --fs-sm:      0.82rem;
  --fs-xs:      0.75rem;
  --fs-metric:  1.6rem;    /* 대표 수치 */

  /* ── 간격·모양 ─────────────────────────────────────── */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;
  --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
  --r-sm: 8px;  --r-md: 12px; --r-lg: 16px;
  --rail-w: 208px;          /* 좌측 품목 레일 폭 */
  --content-max: 1180px;

  /* ── 의미색 (테마 무관 고정) ────────────────────────────
     상승/하락은 어느 테마에서도 같은 뜻이어야 하므로 고정한다. */
  --up:      #2ea043;
  --down:    #e5484d;
  --flat:    #8b949e;
  --warn:    #d9a441;
  --up-soft:   color-mix(in srgb, var(--up) 16%, transparent);
  --down-soft: color-mix(in srgb, var(--down) 16%, transparent);

  /* ── 대응 상태 ─────────────────────────────────────── */
  --st-watch:  #5b8def;   /* 관망 */
  --st-near:   #e08a3c;   /* 임박 */
  --st-edge:   #d9a441;   /* 임박(경계) */
  --st-fire:   #e5484d;   /* 발동 */

  --motion: 160ms cubic-bezier(.2,.7,.3,1);
}

/* ── 다크 (기본) ──────────────────────────────────────── */
:root, [data-theme="dark"] {
  --bg:        #0b0e14;
  --bg-sunken: #080a0f;
  --surface:   #131824;
  --surface-2: #1a2130;
  --line:      #222b3a;
  --line-soft: #1b2230;

  --txt:       #e8edf5;
  --txt-2:     #a8b3c4;
  --txt-3:     #6b7688;

  --accent:      #7dd3e8;   /* 품목 미지정 시 기본 */
  --accent-ink:  #06121a;   /* 악센트 위 글자색 */
  --grid:        #1e2634;   /* 차트 격자 */
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.28);
}

/* ── 라이트 ───────────────────────────────────────────── */
[data-theme="light"] {
  --bg:        #f7f8fa;
  --bg-sunken: #eef1f5;
  --surface:   #ffffff;
  --surface-2: #f2f5f9;
  --line:      #dde3ec;
  --line-soft: #e8edf3;

  --txt:       #121722;
  --txt-2:     #4a5567;
  --txt-3:     #7d8798;

  --accent:      #1a7f9c;
  --accent-ink:  #ffffff;
  --grid:        #e6ebf2;
  --shadow: 0 1px 2px rgba(16,24,40,.06), 0 8px 24px rgba(16,24,40,.08);

  --up:   #1a7f37;
  --down: #c62a30;
  --flat: #6b7688;
}

/* 시스템 설정 따라가기 — 사용자가 직접 고르면 data-theme이 이겨 무시된다 */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --bg:#f7f8fa; --bg-sunken:#eef1f5; --surface:#fff; --surface-2:#f2f5f9;
    --line:#dde3ec; --line-soft:#e8edf3;
    --txt:#121722; --txt-2:#4a5567; --txt-3:#7d8798;
    --accent:#1a7f9c; --accent-ink:#fff; --grid:#e6ebf2;
    --up:#1a7f37; --down:#c62a30; --flat:#6b7688;
    --shadow: 0 1px 2px rgba(16,24,40,.06), 0 8px 24px rgba(16,24,40,.08);
  }
}

/* ── 품목 악센트 ───────────────────────────────────────
   상품마다 고유색을 주어 화면 전체가 그 색을 띤다.
   은은 금속의 차가운 빛, 원유는 점성 있는 앰버에서 가져왔다. */
[data-item="SILVER"] { --accent:#7dd3e8; --accent-ink:#06121a; }
[data-item="WTI"]    { --accent:#e8a33d; --accent-ink:#1a1200; }

[data-theme="light"][data-item="SILVER"] { --accent:#1a7f9c; --accent-ink:#fff; }
[data-theme="light"][data-item="WTI"]    { --accent:#a86a12; --accent-ink:#fff; }

/* 접근성: 모션 최소화 설정을 존중한다 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
}