/* tokens.css — 사이트 전체의 색·치수 토큰. 모든 페이지가 가장 먼저 로드한다.
 *
 * 2026-09-25 점검 F025: style.css만 :root 토큰을 쓰고 나머지 9개 템플릿은 hex를
 * 하드코딩해 배경 4종·카드 6종·테두리 5종·초록 2종이 섞여 있었다(109색, 1,026회).
 * 모든 CSS·인라인 스타일·JS가 생성하는 색은 여기 토큰을 거친다.
 *
 * 테마: <html data-theme="light|dark"> (templates/_theme_boot.html 이 페인트 전에
 * localStorage 'dashTheme'로 설정). 기본은 다크.
 */
:root {
    color-scheme: dark;

    /* ---- 표면 ---- */
    --bg-primary: #0a0e17;      /* 페이지 바탕 */
    --bg-secondary: #111827;    /* 헤더·서브바 */
    --bg-card: #151b2b;         /* 카드 */
    --bg-inset: #1a2035;        /* 카드 안 타일·입력·칩 */
    --bg-hover: #243044;
    --border: #2d3748;          /* 카드·입력 테두리 */
    --border-soft: #1e2740;     /* 표 행 구분선 */

    /* ---- 글자 ---- */
    --text-strong: #ffffff;     /* 큰 숫자·제목 */
    --text-primary: #e1e5ee;    /* 본문 */
    --text-secondary: #8b95a5;  /* 라벨·보조 */
    --text-muted: #6b7280;      /* 캡션·비활성 */
    --text-on-accent: #ffffff;
    /* 밝은 상태색 채움(초록·노랑·빨강 배지) 위 글자 — 다크에선 채움이 밝아 흰 글자가 2.2~3.8:1로
       AA 미달이었다. 다크=진한 글자(7.6:1 on --good), 라이트=흰 글자. */
    --text-on-status: #0a0e17;

    /* ---- 강조 ---- */
    --accent: #3b82f6;
    --accent-hover: #2563eb;
    --accent-text: #60a5fa;     /* 어두운 바탕 위 링크·강조 글자 */
    --accent-soft: rgba(59, 130, 246, 0.15);

    /* ---- 가격 등락 (한국식: 상승 빨강, 하락 파랑) ----
       미국식으로 바꾸려면 이 두 줄만: --up: var(--good); --down: var(--bad);
       등락이 아닌 '정상/오류' 같은 상태에는 쓰지 말 것 — 그건 아래 상태색. */
    --up: #ef4444;
    --down: #3b82f6;
    --flat: var(--text-secondary);
    --up-bg: rgba(239, 68, 68, 0.12);
    --down-bg: rgba(59, 130, 246, 0.12);
    /* 같은 색 틴트(--up-bg/--down-bg) 위에 올리는 글자 — --up/--down 그대로면 3.8~4.1:1로 AA 미달 */
    --up-text: #f87171;
    --down-text: #60a5fa;

    /* ---- 매매 신호 (한국 HTS 관례: 매수 빨강, 매도 파랑) ----
       매수·매도 의견, 기술적 신호, 매매 로그, 강세/약세. 값은 가격 등락과 같게 묶는다 —
       등락을 미국식으로 뒤집으면 신호도 따라간다. 뉴스 감성·장 상태·위험도는 상태색 그대로. */
    --buy: var(--up);
    --sell: var(--down);
    --buy-bg: var(--up-bg);
    --sell-bg: var(--down-bg);
    --buy-text: var(--up-text);
    --sell-text: var(--down-text);

    /* ---- 상태 (좋음/나쁨/주의) — 장 OPEN, 매매 ON, 오류 등 ---- */
    --good: #10b981;
    --bad: #ef4444;
    --warn: #f59e0b;
    --info: #60a5fa;
    --orange: #f97316;
    --purple: #a855f7;
    --good-bg: rgba(16, 185, 129, 0.12);
    --bad-bg: rgba(239, 68, 68, 0.12);
    --warn-bg: rgba(245, 158, 11, 0.12);

    /* 시장 점수 요인 상태(/market, docs/market-top-design.md §4) — 70+ 양호 · 50–69 보통 · 30–49 주의 · 0–29 위험.
       양호·주의·위험은 기존 상태색을 가리키고(라이트 테마는 따라온다), 보통만 무채색을 따로 둔다 */
    --lv-good: var(--good);
    --lv-mid: #8b95a5;
    --lv-warn: var(--warn);
    --lv-bad: var(--bad);

    /* ---- 전문가 견해 (전문가 시황 /experts) — 강세 빨강·약세 파랑(한국 관례), 중립 회색.
       시장 등락 색과 같은 값을 가리켜 등락을 미국식으로 뒤집으면 따라온다. 글자색은 같은 색 틴트 위 AA 용 -text 짝을 쓴다. */
    --view-bull: var(--up);
    --view-bear: var(--down);
    --view-neutral: #8b95a5;
    --view-bull-bg: var(--up-bg);
    --view-bear-bg: var(--down-bg);
    --view-neutral-bg: rgba(139, 149, 165, 0.15);
    --view-bull-text: var(--up-text);
    --view-bear-text: var(--down-text);
    --view-neutral-text: var(--text-secondary);

    /* ---- 일정 종류 (일정 캘린더 /schedule 의 칩·칸·점) ----
       새 색을 만들지 않고 상태색을 가리킨다 — 라이트 테마는 가리키는 쪽 값이 바뀌어 따라온다(--buy 와 같은 방식).
       빨강은 휴장일(일요일·한국 공휴일 숫자 색과 같은 뜻), 만기일은 중요도 '보통'(--warn)과 겹치지 않게 주황. */
    --cal-indicator: var(--info);
    --cal-earnings: var(--purple);
    --cal-dividend: var(--good);
    --cal-expiry: var(--orange);
    --cal-holiday: var(--bad);
    --cal-flow: var(--accent-hover);     /* 수급 이벤트(옵션 만기·정기변경·분기말) — 경제 지표(--info)보다 짙은 파랑 */

    /* ---- 차트 (JS가 cssVar()로 읽는다) ---- */
    --chart-grid: rgba(42, 58, 80, 0.35);
    --chart-axis: #8b95a5;
    --chart-tooltip-bg: #1a2332;

    /* ---- 모달 뒤 가림막 ---- */
    --scrim: rgba(0, 0, 0, 0.72);

    /* ---- 치수 ---- */
    --radius: 8px;
    --radius-lg: 12px;
    --page-max: 1400px;         /* 읽는 페이지 */
    --page-max-wide: 1600px;    /* 대시보드형 페이지 */
    --shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

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

    --bg-primary: #f3f5f8;
    --bg-secondary: #ffffff;
    --bg-card: #ffffff;
    --bg-inset: #eef2f6;
    --bg-hover: #e4eaf1;
    --border: #d3dbe5;
    --border-soft: #e6ebf1;

    --text-strong: #0b1220;
    --text-primary: #1a2330;
    --text-secondary: #4a5a6c;
    --text-muted: #5f6f82;      /* 5.1:1 / 4.6:1 (이전 #7a8a9c 3.5:1) */

    --accent: #2563eb;
    --accent-hover: #1d4ed8;
    --accent-text: #1d4ed8;
    --accent-soft: rgba(37, 99, 235, 0.10);

    --up: #d92626;
    --down: #1d5fd6;
    --up-bg: rgba(217, 38, 38, 0.08);
    --down-bg: rgba(29, 95, 214, 0.08);
    --up-text: #b91c1c;
    --down-text: #1a54bd;

    --good: #0c7d55;            /* 5.2:1 (이전 #0f8a5f 4.4:1) */
    --bad: #c42a2a;
    --warn: #946200;            /* 5.2:1 (이전 #b7791f 3.6:1) */
    --info: #1d5fd6;
    --orange: #c2570c;
    --purple: #7c3aed;
    --good-bg: rgba(12, 125, 85, 0.10);
    --bad-bg: rgba(196, 42, 42, 0.08);
    --warn-bg: rgba(148, 98, 0, 0.10);

    --lv-mid: #6b7a8c;
    --view-neutral: #6b7a8c;
    --view-neutral-bg: rgba(95, 111, 130, 0.12);

    --chart-grid: rgba(0, 0, 0, 0.07);
    --chart-axis: #5a6a7c;
    --chart-tooltip-bg: #ffffff;

    --text-on-status: #ffffff;
    --scrim: rgba(15, 23, 42, 0.45);

    --shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
}