/* ============================================================================
   TanQuant 디자인 토큰 — 사이트 전체 색·글꼴·간격의 단 하나의 원본
   ----------------------------------------------------------------------------
   ★디자인을 바꾸려면 이 파일만 고친다. 페이지(HTML) 안의 :root는 여기 토큰을
     가리키기만 하므로, 여기 값을 바꾸면 16개 페이지가 한꺼번에 따라온다.
   ★작업 규칙·금지 사항은 저장소 루트의 DESIGN_AUTOMATION.md 를 먼저 읽을 것.
   ★페이지 안에 새 색을 직접(#hex) 적지 마라 — tools/design_lint.py 가 잡는다.
   ----------------------------------------------------------------------------
   [2026-08-02 리디자인] 방향: 거래소-다크(딥 차콜 캔버스 + 옐로우 액션) ×
   미니멀-갤러리(크롬 최소화·타이포 위계·톤온톤 표면). 결정 사항:
   · §5-1 표면 2계열 → 같은 그레이 램프로 통합 (bg 동일, 카드 한 단계만 차이)
   · §5-2 CTV 그린 → 브랜드 옐로우 하나로 통일 (색으로 제품을 나누지 않는다)
   · 의미색: 상승/하락을 고채도 거래소 팔레트(#0ecb81/#f6465d)로 교체 — 역할 불변
   ============================================================================ */
:root{
  /* ── 1. 브랜드 ────────────────────────────────────────────────────────── */
  --tq-accent:#fcd535;                    /* 기본 액션(버튼·링크·선택) — 옐로우 */
  --tq-accent-2:#f0b90b;                  /* 액션 눌림·그라데이션 끝 */
  --tq-accent-deep:#26220f;               /* 액션 배경(아주 어두운) */
  --tq-accent-glow:rgba(240,185,11,.35);  /* 액션 글로우 */
  --tq-accent-glow-2:rgba(240,185,11,.45);/* 같은 글로우의 진한 변형(시작 페이지) — 합칠 후보 */
  --tq-brand-spark:#fcd535;               /* 로고 번개 — 액션과 같은 옐로우 */

  /* ── 2. 상태색 (의미가 있다 — 색만 바꾸고 뜻은 바꾸지 마라) ───────────── */
  --tq-up:#0ecb81;                        /* 상승·이익 */
  --tq-down:#f6465d;                      /* 하락·손실 */
  --tq-warn:#ff9800;                      /* 경고·주의 (액션 옐로우와 구분되는 주황) */
  --tq-purple:#8f7bff;                    /* 보조 강조 — lev-cur 와 같은 계열 */
  --tq-pos:#2ee6a8;                       /* 차트 이익(밝은 민트) */
  --tq-neg:#ff5c66;                       /* 차트 손실(밝은 레드) */

  /* ── 3. 표면 · 앱 계열 (홈·백테스트·시뮬·랜딩·시작) ───────────────────── */
  --tq-bg:#0b0e11;                        /* 페이지 바탕 — 딥 차콜 */
  --tq-surface:#1e2329;                   /* 카드·패널 */
  --tq-surface-2:#262c34;                 /* 카드 안 한 겹 더 */
  --tq-border:#2b3139;                    /* 기본 테두리·그리드 */
  --tq-border-2:#3d454f;                  /* 강한 테두리 */
  --tq-text:#eaecef;                      /* 본문 */
  --tq-text-mut:#929aa5;                  /* 보조 설명 */
  --tq-text-faint:#6b7480;                /* 가장 흐린 라벨 */

  /* ── 4. 표면 · 커뮤니티 계열 (community·법무·전략상세) ────────────────── */
  /* [통합됨] 앱 계열과 같은 그레이 램프를 쓴다. 바탕은 동일, 카드만 반 단계
     낮춰 커뮤니티 특유의 차분함을 유지한다. (구 §5-1 결정 완료) */
  --tq-bg-alt:#0b0e11;
  --tq-surface-alt:#171b21;
  --tq-surface-alt-2:#1e2329;
  --tq-text-alt:#eaecef;
  --tq-text-mut-alt:#929aa5;
  --tq-text-faint-alt:#6b7480;

  /* ── 4-b. CTV(순환타켓) 테마 ─────────────────────────────────────────────
     [통합됨] 그린 액센트를 버리고 브랜드 옐로우 하나로 간다. 표면은 앱 계열과
     같은 램프. (구 §5-2 결정 완료 — 제품 구분은 색이 아니라 타이포·카피로) */
  --tq-ctv-accent:#fcd535;
  --tq-ctv-surface:#14181d;
  --tq-ctv-border:#2b3139;
  --tq-ctv-text:#eaecef;
  --tq-ctv-text-mut:#929aa5;
  --tq-ctv-text-mut-2:#a5adba;

  /* ── 5. 차트 배수 팔레트 (★의미 고정 — 표·곡선·깃발·칩이 같은 색을 쓴다) ─
       색을 바꿀 수는 있지만 '역할 ↔ 색'의 짝은 절대 섞지 마라.
       quant-metrics.js 가 이 토큰을 읽어 SVG를 그린다. */
  --tq-lev-1:#39c5ff;                     /* 레버리지 없이 1배 */
  --tq-lev-half:#2ee87c;                  /* 안전하게 절반만 */
  --tq-lev-cur:#8f7bff;                   /* 지금 내 설정 */
  --tq-lev-peak:#ffd54a;                  /* 돈이 가장 많이 불어난 배수 */
  --tq-lev-over:#ff8a3d;                  /* 욕심의 결과 — 사실상 청산 */
  --tq-chart-bg:#0b0e11;                  /* 차트 라벨 배경 — 새 캔버스와 동일 */
  --tq-chart-grid:#2b3139;                /* 차트 그리드 */
  --tq-crisis:#fcd535;                    /* 최장 물속 음영·위기 강조 — 브랜드 옐로우 */

  /* ── 6. 글꼴 ──────────────────────────────────────────────────────────── */
  --tq-font-sans:-apple-system,BlinkMacSystemFont,'Segoe UI','Pretendard','Noto Sans KR',Roboto,sans-serif;
  --tq-font-ui:-apple-system,BlinkMacSystemFont,'Segoe UI','Pretendard','Noto Sans KR',sans-serif;
  --tq-font-ui2:-apple-system,BlinkMacSystemFont,'Segoe UI','Pretendard','Noto Sans KR',sans-serif; /* [통합됨] ui 와 동일 */
  --tq-font-mono:ui-monospace,'SF Mono','Roboto Mono',Consolas,monospace;

  /* ── 7. 타입 스케일 ───────────────────────────────────────────────────────
       ★아직 대부분의 페이지가 px를 직접 쓴다. 디자인 작업이 이쪽으로 옮겨올 자리이며,
         새로 만드는 UI는 반드시 이 토큰을 쓴다. 모바일 하한은 mobile.css 규칙과 맞춘다. */
  --tq-fs-hero:38px;
  --tq-fs-h1:27px;
  --tq-fs-h2:20px;
  --tq-fs-lg:17px;
  --tq-fs-md:15px;                        /* 본문 기본 */
  --tq-fs-sm:13px;
  --tq-fs-xs:11.5px;                      /* 라벨 하한 — 이보다 작게 만들지 마라 */
  --tq-fs-input:16px;                     /* ★모바일 자동 확대 방지 하한 */
  --tq-lh-tight:1.25;
  --tq-lh-body:1.65;

  /* ── 8. 간격 · 모서리 ─────────────────────────────────────────────────── */
  --tq-sp-1:4px;  --tq-sp-2:8px;  --tq-sp-3:12px;
  --tq-sp-4:16px; --tq-sp-5:24px; --tq-sp-6:32px;
  --tq-r-sm:8px; --tq-r-md:12px; --tq-r-lg:16px; --tq-r-pill:999px;
  --tq-touch:44px;                        /* ★터치 영역 최소 높이 */

  /* ── 9. 상태 ──────────────────────────────────────────────────────────── */
  --tq-focus:0 0 0 2px rgba(240,185,11,.6);
  --tq-dim:.32;                           /* 비선택 곡선 투명도 */
  --tq-t-fast:.14s; --tq-t-base:.22s;
}

/* [2026-08-02] 페이지 안의 하드코딩 블루(#2962ff·rgba(41,98,255,…) 계열)는
   전부 옐로우 계열로 소스에서 직접 치환했다(DESIGN_AUTOMATION.md §2 '필요할 때만').
   옐로우 배경 위 글자는 #181a20 잉크를 쓴다 — 새 액션 버튼도 흰 글자를 얹지 마라. */

/* ★장식 그림자는 쓰지 않는다(선·여백·색으로만 위계를 준다) — 이 규칙을 깨지 마라.
   그림자 토큰을 새로 만들고 싶으면 DESIGN_AUTOMATION.md 의 금지 목록부터 고칠 것. */