/* 디자인 토큰 — 색·서체의 단일 출처.
 *
 * 컨셉: 어두운 방의 계기(計器). 소비자용 핀테크 앱이 아니라 하루 종일 켜 두는
 * 관제 화면이다.
 *
 * 서체는 가독성이 최우선이다. 처음엔 숫자를 Bahnschrift(DIN 1451 파생 계기판
 * 서체)로 두고 한글과 분리했는데, 콘덴스트라서 작은 크기와 넓은 자간에서
 * 읽기가 불편했다. 지금은 한 가족으로 통일한다.
 *
 *   본문·한글·수치  Noto Sans KR (라틴 글리프 품질이 좋아 숫자까지 맡을 수 있다)
 *   폴백            Segoe UI Variable / Segoe UI — 윈도우 기본, 작은 크기에서 강함
 *   종목코드        Consolas — 코드는 등폭이어야 자릿수가 헷갈리지 않는다
 *
 * 전부 시스템 내장이라 웹폰트 없이 오프라인에서 동작한다. 로컬 도구에 맞는
 * 제약이고, 첫 페인트에 폰트가 튀지 않는다는 이점도 있다.
 *
 * 따뜻한 색은 황동(brass) 하나뿐이고, 황동은 면을 절대 채우지 않는다 —
 * 기준선과 이 화면의 주제(최고가 대비)만 표시한다.
 *
 * 대비는 주·야간 양쪽에서 WCAG AA(4.5:1)를 만족한다. --faint 는 이름과 달리
 * 흐리지 않은데, 작은 라벨이 4.5:1을 지키려면 흐려질 수 없기 때문이다.
 */

:root {
  color-scheme: light dark;

  /* ── 서체 ── */
  /* 수치용과 본문용을 같은 가족으로 둔다. 자리만 맞추면 되므로 tabular-nums
     로 자릿수를 정렬하고, 서체를 바꿔 시선을 흩뜨리지 않는다. */
  --din: "Noto Sans KR", "Segoe UI Variable Text", "Segoe UI",
         system-ui, -apple-system, sans-serif;
  --han: "Noto Sans KR", "Segoe UI Variable Text", "Segoe UI",
         "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", system-ui, sans-serif;
  --mono: Consolas, "Cascadia Mono", "D2Coding", ui-monospace, monospace;

  /* ── 간격 (4px 배수) ── */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.25rem; --sp-6: 1.5rem;  --sp-8: 2rem;    --sp-10: 2.5rem;
  --sp-12: 3rem;

  /* ── 크기 ──
     라벨을 10px대로 두면 읽으려고 눈을 찌푸리게 된다. 한 단계씩 올렸다. */
  --fs-xs: .72rem;  --fs-sm: .8125rem;  --fs-base: .9rem;
  --fs-md: 1.06rem; --fs-lg: 1.24rem;   --fs-xl: 1.9rem;

  /* 라벨 자간. 넓은 자간은 라틴 대문자에선 멋있지만 한글에선 글자가 흩어져
     읽기 어렵다. 좁게 잡는다. */
  --track-label: .02em;

  --r-sm: 3px;  --r-md: 5px;  --r-full: 999px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --dur-fast: 120ms;
  --dur: 200ms;

  --header-h: 3.25rem;
}

/* ── 야간 (기본) ────────────────────────────────────────────────────── */
:root,
:root[data-theme="night"] {
  --abyss:      #0B1418;
  --hull:       #101E25;
  --hull-2:     #16262E;
  --rule:       #1C333F;
  --rule-soft:  #16262E;

  --chalk:      #DDE9ED;
  --slate:      #8CA5B0;
  --faint:      #6B8794;

  --brass:      #C8933A;
  --brass-dim:  #6E5220;
  --brass-wash: rgba(200,147,58,.07);

  --ok:         #45C46B;
  --danger:     #E5605A;

  --row-hover:  #16262E;
  --flash:      rgba(200,147,58,.16);
  --skeleton:   linear-gradient(90deg,#16262E 25%,#1C333F 50%,#16262E 75%);
  --backdrop:   rgba(3,8,11,.66);
  --shadow:     0 2px 4px rgba(0,0,0,.4), 0 18px 48px -14px rgba(0,0,0,.7);
}

/* ── 주간 — 같은 계기, 밝은 방. 토큰만 교체한다. ────────────────────── */
:root[data-theme="day"] {
  --abyss:      #EAEFF2;
  --hull:       #FFFFFF;
  --hull-2:     #F2F6F8;
  --rule:       #CFDCE3;
  --rule-soft:  #E2EAEE;

  --chalk:      #0B1920;
  --slate:      #405966;
  --faint:      #556D7A;

  --brass:      #855C12;
  --brass-dim:  #C4A365;
  --brass-wash: rgba(133,92,18,.06);

  --ok:         #147A38;
  --danger:     #B0231B;

  --row-hover:  #F2F6F8;
  --flash:      rgba(133,92,18,.13);
  --skeleton:   linear-gradient(90deg,#E2EAEE 25%,#F2F6F8 50%,#E2EAEE 75%);
  --backdrop:   rgba(11,25,32,.42);
  --shadow:     0 1px 3px rgba(11,25,32,.1), 0 16px 44px -14px rgba(11,25,32,.28);
}

/* 시스템 설정이 밝음이고 사용자가 따로 고르지 않았으면 주간을 쓴다. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --abyss:      #EAEFF2;
    --hull:       #FFFFFF;
    --hull-2:     #F2F6F8;
    --rule:       #CFDCE3;
    --rule-soft:  #E2EAEE;

    --chalk:      #0B1920;
    --slate:      #405966;
    --faint:      #556D7A;

    --brass:      #855C12;
    --brass-dim:  #C4A365;
    --brass-wash: rgba(133,92,18,.06);

    --ok:         #147A38;
    --danger:     #B0231B;

    --row-hover:  #F2F6F8;
    --flash:      rgba(133,92,18,.13);
    --skeleton:   linear-gradient(90deg,#E2EAEE 25%,#F2F6F8 50%,#E2EAEE 75%);
    --backdrop:   rgba(11,25,32,.42);
    --shadow:     0 1px 3px rgba(11,25,32,.1), 0 16px 44px -14px rgba(11,25,32,.28);
  }
}

/* ── 등락 색상 관습 ─────────────────────────────────────────────────
   국내 기본: 상승 빨강 / 하락 파랑. 색만으로 정보를 전달하지 않도록
   화면에서는 항상 ▲▼ 기호를 병기한다. */
:root,
:root[data-convention="kr"] {
  --up: #FF6259;
  --down: #4F95F5;
}

:root[data-convention="global"] {
  --up: #2ECC8A;
  --down: #FF6259;
}

:root[data-theme="day"][data-convention="kr"],
:root[data-theme="day"]:not([data-convention="global"]) {
  --up: #C82C23;
  --down: #1C68D3;
}

:root[data-theme="day"][data-convention="global"] {
  --up: #147A38;
  --down: #C82C23;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]):not([data-convention="global"]) {
    --up: #C82C23;
    --down: #1C68D3;
  }
  :root:not([data-theme])[data-convention="global"] {
    --up: #147A38;
    --down: #C82C23;
  }
}