/* web/static/tokens.css -- 디자인 토큰 단일 정의 (R7A, 2026-07-18)
   시스템: 정제 핀테크 라이트. 캔버스 쿨 뉴트럴 + 흰 카드 서피스 + 인디고 액센트.
   SSOT 분담: 이 파일 = 지면·타이포·간격·라운딩·그림자 토큰.
             web/palette.py = 차트·의미색 (--color-*, dist/static/palette.css).
   로드 순서: tokens.css -> (palette.css, 어드민만) -> style.css/app.css/admin.css.
   구 계약 호환: --bg --panel --paper --ink --sub --line --accent
   --accent-soft --sans --mono 이름 유지. --serif 는 삭제 (참조 금지). */

/* -- 자체 호스팅 폰트 (OFL) -- 서브셋 woff2, CDN 아님 -- */
@font-face {
  font-family: "Pretendard Variable";
  src: url("/static/fonts/PretendardVariable-sub.ee12fffc042b.woff2") format("woff2");
  font-weight: 45 920;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/static/fonts/JetBrainsMono-sub.588d538906ed.woff2") format("woff2");
  font-weight: 100 800;
  font-display: swap;
}

:root {
  color-scheme: light dark;

  /* 지면 */
  --bg: #f7f9fb;            /* 캔버스 (쿨 뉴트럴) */
  --surface: #ffffff;       /* 카드 서피스 */
  --panel: #f2f4f7;         /* 인셋 패널·행 hover */
  --paper: #ffffff;         /* 차트 지면 -- 다크에서도 밝게 (SVG 고정색 가독) */

  /* 텍스트 */
  --ink: #101828;           /* 17.75:1 on surface */
  --sub: #475467;           /* 7.69:1 on surface, 7.28:1 on bg */

  /* 보더 */
  --line: #e4e7ec;
  --line-strong: #d0d5dd;

  /* 액센트 (인디고 -- DIRECTION 적/청과 충돌하지 않는 제3색) */
  --accent: #533afd;        /* 6.19:1 on surface, 5.87:1 on bg, 5.62:1 on panel */
  --accent-strong: #4630d8; /* hover·active, 7.85:1 on surface */
  --accent-soft: #eceefe;   /* 틴트 배경 -- accent 텍스트 5.37:1 위에서 통과 */
  --accent-ink: #ffffff;    /* on accent, 6.19:1 */

  /* 노출 주목 세기 램프 (조용→조명, P-explore-redesign) — 판정/방향색 아님, 서수 인코딩.
     앰버 = 주목받는 중(월상 원반 은유). 색은 보조, 텍스트 라벨이 정본. */
  --lit-quiet: #cfd4dc;   /* 주목 전 — 중립 회색 */
  --lit-mid:   #8ea0d8;   /* 보통 — 옅은 인디고 (accent 계열, 저채도) */
  --lit-lit:   #f79009;   /* 주목받는 중 — 앰버 */

  /* 그림자 */
  --shadow-card: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.10);
  --shadow-raised: 0 4px 6px -2px rgba(16, 24, 40, 0.05),
                   0 12px 16px -4px rgba(16, 24, 40, 0.10);
  --scroll-shade: rgba(16, 24, 40, 0.14);  /* 표 가로 스크롤 섀도 */

  /* 글래스 (R7B) -- 떠 있는 크롬 전용: sticky 내비 바 / Ask Sayo 런처 / 홈 가치 바.
     본문·카드 서피스에 사용 금지. 적용은 @supports (backdrop-filter) 안에서만 --
     미지원 브라우저는 불투명 기본값이 그대로 남는다 (fail-open).
     prefers-reduced-transparency 오버라이드는 style.css 크롬 블록이 담당. */
  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(16, 24, 40, 0.08);
  --glass-blur: 14px;
  --glass-saturate: 160%;

  /* 라운딩 */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* 간격 -- 4px 베이스 스케일 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* 타이포 -- Pretendard 단일 패밀리 (명조 폐기) */
  --sans: "Pretendard Variable", "Apple SD Gothic Neo", "Noto Sans KR",
          "Malgun Gothic", -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d1220;
    --surface: #151b2c;
    --panel: #1c2333;
    --lit-quiet: #3a4358;   /* 주목 전 — 어두운 중립 */
    --lit-mid:   #5a6bb0;   /* 보통 — 인디고 */
    --lit-lit:   #f5a623;   /* 주목받는 중 — 앰버(다크 대비 상향) */
    /* --paper 는 재정의하지 않음 (차트 지면은 다크에서도 흰색 유지) */
    --ink: #e6e9f0;          /* 14.10:1 on surface */
    --sub: #98a2b3;          /* 6.10:1 on panel */
    --line: #232b3d;
    --line-strong: #364156;
    --accent: #a2acf8;       /* 8.71:1 on bg, 7.99:1 on surface */
    --accent-strong: #bcc3fb;
    --accent-soft: #232848;  /* accent 텍스트 6.67:1 위에서 통과 */
    --accent-ink: #0d1220;
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.35);
    --shadow-raised: 0 4px 6px -2px rgba(0, 0, 0, 0.4),
                     0 12px 16px -4px rgba(0, 0, 0, 0.5);
    --scroll-shade: rgba(230, 233, 240, 0.16);
    --glass-bg: rgba(13, 18, 32, 0.66);
    --glass-border: rgba(230, 233, 240, 0.10);
  }
}

/* 인쇄 = 라이트 고정 (구 style.css @media print :root 이관) */
@media print {
  :root {
    color-scheme: light;
    --bg: #f7f9fb; --surface: #ffffff; --panel: #f2f4f7; --paper: #ffffff;
    --ink: #101828; --sub: #475467;
    --line: #e4e7ec; --line-strong: #d0d5dd;
    --accent: #533afd; --accent-strong: #4630d8;
    --accent-soft: #eceefe; --accent-ink: #ffffff;
  }
}