/* ==========================================================================
   Pagu.info Design Tokens — docs/architecture.md §5 (Stripe 기반)
   --------------------------------------------------------------------------
   0단계 공통 부품 1/5.

   왜 이름 앞에 `--pagu-` 가 붙는가:
     기존 src/styles.css 와 src/styles-v2.css 가 이미 `--bg`, `--text`,
     `--blue` 같은 짧은 이름을 쓰고 있다. 같은 이름을 다시 정의하면 한 페이지에서
     두 파일을 함께 불러올 때 기존 화면 색이 전부 바뀐다.
     그래서 토큰의 정식 이름은 `--pagu-*` 로 두고, architecture.md §5 의 짧은
     이름(--bg/--fg/--accent ...)은 아래 "별칭" 블록에서 제공한다.
     별칭은 <body data-pagu-tokens> 가 붙은 새 페이지 안에서만 켜지므로
     기존 페이지에는 영향이 없다. 값은 §5 와 완전히 동일하다.

   쓰는 법 (새 페이지):
     <link rel="stylesheet" href="src/tokens.css" />
     <body data-pagu-tokens>   <!-- 짧은 별칭까지 쓰려면 이 속성 -->
   ========================================================================== */

:root {
  /* --- 색: architecture.md §5 --------------------------------------------- */
  --pagu-bg: #f6f9fc;        /* 배경 — 흰색보다 아주 살짝 푸른 회색 */
  --pagu-panel: #ffffff;     /* 카드 */
  --pagu-fg: #0a2540;        /* 제목 — 네이비 */
  --pagu-muted: #425466;     /* 본문·설명 */
  --pagu-accent: #635bff;    /* 강조·링크·버튼 */
  /* accent 위에 올리는 글자색. accent 는 다크에서 연한 라벤더(#9b95ff)로 바뀌므로
     흰 글자를 고정하면 다크에서 2.58:1 로 깨진다. 반드시 이 토큰을 쓸 것.
     라이트 4.70:1 / 다크 6.93:1. */
  --on-accent: #ffffff;
  /* 2026-10-13: 세 색을 한 단계씩 어둡게 내렸다. 색조는 그대로다.
     원래 값(#0a966f / #e0415b / #b4762e)은 자기 배경색 위에서 3.3~3.6:1 밖에
     안 나와 작은 글자 기준 4.5:1 에 미달했다. 배지와 숫자가 전부 이 색을
     글자색으로 쓴다. 새 값은 배지 배경 위 4.5:1 이상, 흰 배경 위 5:1 이상이다.
     더 밝게 되돌리지 말 것 — 보기에는 예쁘지만 작은 글자가 안 읽힌다. */
  --pagu-up: #087c5c;        /* 상승 */
  --pagu-down: #d3223f;      /* 하락 */
  --pagu-warn: #996427;      /* 예시 데이터 배지 */

  /* --- 위에서 파생된 보조 색 (§5 8색에서 계산한 연한 배경·테두리) --------- */
  --pagu-line: #e3e9f2;
  --pagu-line-strong: #cfd9e8;
  --pagu-bg-subtle: #eef3f9;
  --pagu-accent-weak: #eeedff;
  --pagu-accent-strong: #4b45cc;
  --pagu-up-weak: #e6f5f0;
  --pagu-down-weak: #fdecef;
  --pagu-warn-weak: #fdf4e4;
  --pagu-neutral: #616f7f;   /* 준비 중 배지. 2026-10-13 대비 4.5:1 맞춤 */
  --pagu-neutral-weak: #eef1f5;
  --pagu-focus: #635bff;

  /* --- 간격: 4px 격자 ----------------------------------------------------- */
  --pagu-space-1: 4px;
  --pagu-space-2: 8px;
  --pagu-space-3: 12px;
  --pagu-space-4: 16px;
  --pagu-space-5: 24px;
  --pagu-space-6: 32px;
  --pagu-space-7: 48px;
  --pagu-space-8: 64px;

  /* --- 모서리 반경 -------------------------------------------------------- */
  --pagu-radius-sm: 8px;
  --pagu-radius-md: 12px;
  --pagu-radius-lg: 18px;
  --pagu-radius-full: 999px;

  /* --- 그림자 (조용한 금융 앱 톤: 약하게만) ------------------------------ */
  --pagu-shadow-sm: 0 1px 2px rgba(10, 37, 64, 0.06);
  --pagu-shadow-md: 0 4px 14px rgba(10, 37, 64, 0.08);
  --pagu-shadow-lg: 0 18px 40px rgba(10, 37, 64, 0.10);

  /* --- 타이포 ------------------------------------------------------------- */
  --pagu-font-sans:
    "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
    "Apple SD Gothic Neo", "Segoe UI", Roboto, "Noto Sans KR",
    "Malgun Gothic", sans-serif;
  --pagu-font-mono:
    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;
  --pagu-text-xs: 12px;
  --pagu-text-sm: 13px;
  --pagu-text-base: 15px;
  --pagu-text-lg: 18px;
  --pagu-text-xl: 24px;
  --pagu-text-2xl: 32px;

  /* --- 동작 (§5: 0.2초 내외로 아주 절제) --------------------------------- */
  --pagu-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --pagu-duration: 180ms;

  /* --- 터치 영역 최소치 (AGENTS.md 규칙: 44px) --------------------------- */
  --pagu-touch-min: 44px;

  /* --- 차트 색 (pagu-chart.js 가 읽어 Lightweight Charts 에 넘긴다) ------ */
  --pagu-chart-line: #635bff;
  --pagu-chart-area-top: rgba(99, 91, 255, 0.28);
  --pagu-chart-area-bottom: rgba(99, 91, 255, 0.02);
  --pagu-chart-grid: #eaeff6;
  --pagu-chart-text: #425466;
}

/* ==========================================================================
   다크 모드
   새 페이지는 OS 설정을 따르고, <html data-pagu-theme="light|dark"> 로 강제할 수 있다.

   주의 (2026-10-13 정정): "기존 페이지는 color-scheme:light 라서 영향이 없다"고
   적혀 있었으나 사실이 아니다. color-scheme 은 네이티브 위젯(입력창·스크롤바)만
   바꾸고 prefers-color-scheme 매칭은 막지 못한다. 그래서 아래 블록은 기존
   페이지에도 그대로 적용되고, --pagu-* 를 쓰지 않는 고정색만 라이트 값으로
   남아 글자가 안 보이는 문제가 실제로 발생했다(styles-v2.css 의 gray 4개 등).
   새 색을 추가할 때는 반드시 --pagu-* 에서 파생시킨다.
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root:not([data-pagu-theme="light"]) {
    --pagu-bg: #071b2d;
    --pagu-panel: #0e2b44;
    --pagu-fg: #e8eff7;
    --pagu-muted: #a3b6c9;
    --pagu-accent: #9b95ff;
    --on-accent: #07182b;
    --pagu-up: #2fc39b;
    --pagu-down: #ff7085;
    --pagu-warn: #e0a85c;

    --pagu-line: #1b405e;
    --pagu-line-strong: #2a5478;
    --pagu-bg-subtle: #0b2338;
    --pagu-accent-weak: #1d2a55;
    --pagu-accent-strong: #b8b3ff;
    --pagu-up-weak: #0d3a31;
    --pagu-down-weak: #45202b;
    --pagu-warn-weak: #3b2e18;
    --pagu-neutral: #9aacbf;
    --pagu-neutral-weak: #15324c;
    --pagu-focus: #9b95ff;

    --pagu-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --pagu-shadow-md: 0 4px 14px rgba(0, 0, 0, 0.40);
    --pagu-shadow-lg: 0 18px 40px rgba(0, 0, 0, 0.50);

    --pagu-chart-line: #9b95ff;
    --pagu-chart-area-top: rgba(155, 149, 255, 0.30);
    --pagu-chart-area-bottom: rgba(155, 149, 255, 0.02);
    --pagu-chart-grid: #17384f;
    --pagu-chart-text: #a3b6c9;
  }
}

:root[data-pagu-theme="dark"] {
  --pagu-bg: #071b2d;
  --pagu-panel: #0e2b44;
  --pagu-fg: #e8eff7;
  --pagu-muted: #a3b6c9;
  --pagu-accent: #9b95ff;
  --on-accent: #07182b;
  --pagu-up: #2fc39b;
  --pagu-down: #ff7085;
  --pagu-warn: #e0a85c;

  --pagu-line: #1b405e;
  --pagu-line-strong: #2a5478;
  --pagu-bg-subtle: #0b2338;
  --pagu-accent-weak: #1d2a55;
  --pagu-accent-strong: #b8b3ff;
  --pagu-up-weak: #0d3a31;
  --pagu-down-weak: #45202b;
  --pagu-warn-weak: #3b2e18;
  --pagu-neutral: #9aacbf;
  --pagu-neutral-weak: #15324c;
  --pagu-focus: #9b95ff;

  --pagu-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --pagu-shadow-md: 0 4px 14px rgba(0, 0, 0, 0.40);
  --pagu-shadow-lg: 0 18px 40px rgba(0, 0, 0, 0.50);

  --pagu-chart-line: #9b95ff;
  --pagu-chart-area-top: rgba(155, 149, 255, 0.30);
  --pagu-chart-area-bottom: rgba(155, 149, 255, 0.02);
  --pagu-chart-grid: #17384f;
  --pagu-chart-text: #a3b6c9;
}

/* ==========================================================================
   별칭 — architecture.md §5 의 짧은 이름
   새 페이지(<body data-pagu-tokens>)에서만 켜진다. 기존 페이지는 안전.
   ========================================================================== */

[data-pagu-tokens] {
  --bg: var(--pagu-bg);
  --panel: var(--pagu-panel);
  --fg: var(--pagu-fg);
  --muted: var(--pagu-muted);
  --accent: var(--pagu-accent);
  --up: var(--pagu-up);
  --down: var(--pagu-down);
  --warn: var(--pagu-warn);
}

/* ==========================================================================
   새 페이지 기본값 — 토큰을 쓰는 페이지의 공통 바탕
   ========================================================================== */

[data-pagu-tokens] {
  margin: 0;
  min-width: 320px;
  background: var(--pagu-bg);
  color: var(--pagu-fg);
  font-family: var(--pagu-font-sans);
  font-size: var(--pagu-text-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

[data-pagu-tokens] *,
[data-pagu-tokens] *::before,
[data-pagu-tokens] *::after {
  box-sizing: border-box;
}

/* 숫자: 전부 tabular-nums + 오른쪽 정렬 (AGENTS.md 규칙) */
[data-pagu-tokens] .pagu-num,
[data-pagu-tokens] td.pagu-num,
[data-pagu-tokens] th.pagu-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  text-align: right;
  white-space: nowrap;
}

[data-pagu-tokens] .pagu-unit {
  color: var(--pagu-muted);
  font-size: 0.85em;
  margin-left: 2px;
}

/* 키보드 접근성: 포커스 링을 지우지 않는다 (AGENTS.md 규칙) */
[data-pagu-tokens] :focus-visible {
  outline: 2px solid var(--pagu-focus);
  outline-offset: 2px;
  border-radius: var(--pagu-radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  [data-pagu-tokens] * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}