/*
 * tokens.css — 새 화면(treemap.html, /cell/{slug} 세포 상세) 전용 디자인 토큰 정본.
 *
 * AGENTS.md ⑥ "스타일은 static/css/tokens.css 변수만"의 근거가 되는 파일.
 * ⚠️ 구 화면(static/styles.css, 다크 글라스 테마 — /region, /cam, /about 등)은
 * 이 파일과 무관하다. 나중에 구 화면이 정리되면 그때 통합을 검토한다.
 *
 * 이름 규칙:
 *   --color-*          배경/텍스트/테두리 등 단색 값
 *   --heat-0 .. heat-4 item_count 5단계 열기(heat) 색. 파스텔 크림→앰버, 낮을수록 옅음.
 *   --elevation-*      블록 부유감 — filter: drop-shadow(...) 전체 값을 통째로 담는다
 *   --timeline-*       담벼락 타임라인 선·노드 색(heat 계열에서 파생)
 *   --embed-frame-bg   oEmbed 카드를 감싸는 프레임 배경(heat 계열에서 파생)
 *   --radius-*         모서리 반경
 *   --font-family      공통 글꼴 스택
 *
 * 값은 옮기기 전 static/treemap.html · server.py render_cell_page()의 리터럴을
 * 그대로 복사했다 — 값은 하나도 바꾸지 않았다(리팩터링, 재디자인 아님).
 */
:root {
  /* 배경·텍스트·테두리 */
  --color-bg: #ffffff;
  --color-text: #1a1a18;
  --color-text-muted: #6b6b64;
  --color-border: #d9d9d4;
  --color-border-hover: #b7b7ae;

  /* 입력창(treemap.html 하단 URL 입력창) */
  --color-input-bg: #f7f7f5;
  --color-input-border: #d9d9d4;
  --color-input-text: #1a1a18;
  --color-input-placeholder: #9a9a92;
  --color-composer-bg: #ffffff;
  --color-composer-prompt: #4f4f49;
  --color-composer-pill-bg: #fffdf9;
  --color-composer-pill-border: #ead9c4;
  --color-composer-control-bg: #f5eadc;
  --color-composer-control-hover-bg: #eedfce;
  --color-composer-control: #4f4a43;
  --color-composer-submit-bg: #ce9c73;
  --color-composer-submit-hover-bg: #bd865d;
  --color-composer-submit: #ffffff;
  --color-composer-suggestion-bg: #fffaf2;
  --color-composer-suggestion-border: #ead9c4;
  --color-composer-suggestion-icon-bg: #f5eadc;
  --color-composer-suggestion-icon: #8b6446;
  --color-composer-suggestion-text: #3d3a35;

  /* 툴팁(treemap.html 작은 블록 hover/tap 라벨) */
  --color-tooltip-bg: #1a1a18;
  --color-tooltip-text: #ffffff;

  /* 열기(heat) 색 5단계 — item_count 구간 0~4. 파스텔 크림→앰버, 계열(hue) 고정.
     라벨 텍스트(--color-text) 대비: heat-0 15.8:1 / heat-1 13.4:1 / heat-2 11.2:1 /
     heat-3 9.1:1 / heat-4 7.2:1 — 전 구간 WCAG AA(4.5:1) 이상. */
  --heat-0: #f7f3ed;
  --heat-1: #eedfce;
  --heat-2: #e5caae;
  --heat-3: #dcb48f;
  --heat-4: #ce9c73;

  /* 블록 부유감 — 종이가 살짝 들린 정도의 은은한 그림자. 86개가 동시에 화면에
     있어 그림자가 세면 탁해지므로 blur·투명도를 낮게 유지. */
  --elevation-card: drop-shadow(0 1px 1.5px rgba(26, 26, 24, 0.10));
  --elevation-card-hover: drop-shadow(0 2px 3px rgba(26, 26, 24, 0.16));
  --elevation-composer-pill: 0 10px 30px rgba(26, 26, 24, 0.13), 0 2px 8px rgba(26, 26, 24, 0.08);
  --elevation-composer-submit: 0 5px 14px rgba(139, 100, 70, 0.28);

  /* 담벼락 타임라인 선·노드, oEmbed 프레임 배경 — heat 계열에서 그대로 파생 */
  --timeline-line: var(--heat-3);
  --timeline-node: var(--heat-4);
  --embed-frame-bg: var(--heat-0);
  --wall-video-bg: var(--embed-frame-bg);
  --wall-video-border: var(--color-border);
  --wall-video-border-width: 1px;
  --wall-video-aspect-ratio: 16 / 9;
  --wall-video-icon-bg: var(--heat-2);
  --wall-video-icon: var(--color-text);
  --wall-video-text: var(--color-text-muted);
  --wall-video-padding: 14px;
  --wall-video-icon-size: 34px;
  --wall-video-icon-triangle: 9px;
  --wall-video-title-size: 13px;
  --wall-video-title-line-height: 1.45;
  --wall-density-bg: var(--heat-0);
  --wall-density-border: var(--color-border);
  --wall-density-border-width: 1px;
  --wall-density-min-height: 56vh;
  --wall-density-padding: 16px;
  --wall-density-gap: 14px;
  --wall-density-tight-gap: 5px;
  --wall-density-title-size: 18px;
  --wall-density-title-line-height: 1.35;
  --wall-density-meta-size: 13px;
  --wall-density-meta-line-height: 1.45;
  --wall-density-date-size: 12px;
  --wall-density-date-line-height: 1.2;
  --wall-density-badge-padding: 6px 10px;
  --wall-density-badge-border: var(--heat-3);
  --wall-density-badge-bg: var(--heat-1);
  --wall-density-chart-gap: 4px;
  --wall-density-chart-margin: 8px 0 2px;
  --wall-density-chart-min-height: 178px;
  --wall-density-day-min-width: 14px;
  --wall-density-day-height: 168px;
  --wall-density-bar-min-height: 132px;
  --wall-density-bar-min-fill: 8px;
  --wall-density-bar-radius: 999px 999px 5px 5px;
  --wall-density-bar-track: rgba(255, 255, 255, 0.72);
  --wall-density-calm: var(--heat-1);
  --wall-density-normal: var(--heat-2);
  --wall-density-busy: var(--heat-3);
  --wall-density-very-busy: var(--heat-4);
  --wall-tail-spacer-height: 56vh;

  /* 글꼴 */
  --font-family: -apple-system, BlinkMacSystemFont, "Pretendard", "Noto Sans KR", sans-serif;

  /* 반경 */
  --radius-cell: 10; /* treemap.html SVG 블록 모서리 — 단위 없음, JS parseFloat로 읽는다 */
  --radius-card: 14px; /* 세포 상세 페이지 카드/프레임/유튜브 iframe 모서리 */
  --radius-composer-pill: 28px;
  --radius-composer-button: 999px;
  --radius-composer-suggestion: 14px;
}