/* 디자인 토큰 — Figma `inha_llm / 03. Design` 에서 그대로 옮긴 값
 *
 * 이름은 Figma Dev Mode 가 내보내는 형태를 쓴다 (`--color-bg-muted`).
 * 우리가 새로 지으면 다음에 시안이 바뀔 때 대조가 안 된다.
 *
 * **브랜드가 정하는 것은 여기 없다.** 주색·헤더·로고는 app/branding.py 가
 * `<html style="...">` 로 주입하며, inline 이라 이 파일의 `:root` 를 이긴다.
 * 그래서 브랜드마다 다른 값은 `--brand-*` 로 두고 여기서는 건드리지 않는다.
 *
 * 이 파일은 다른 CSS 보다 먼저 로드한다.
 */

:root {
    /* --- 배경 ------------------------------------------------------- */
    --color-bg-primary: #ffffff;
    --color-bg-surface: #ffffff;
    --color-bg-muted: #f8f9fa;
    --color-bg-sunken: #f0f2f5;
    --color-bg-pressed: #e2e4e8;
    --color-bg-disabled: #f0f2f5;
    /* 목차 칩의 '선택' 배경. Upstage 블랙 */
    --color-bg-inverse: #191722;

    /* --- 테두리 ----------------------------------------------------- */
    --color-border-divider: #f0f2f5;
    --color-border-strong: #e2e4e8;
    --border-width: 1px;

    /* --- 글자 ------------------------------------------------------- */
    --color-text-primary: #000000;
    /* 패널 제목 전용. 시안이 본문 검정(#000)과 따로 쓴다 */
    --color-text-heading: #1a1a1a;
    --color-text-neutral-strong: #4b5562;
    --color-text-neutral: #808a97;
    /* 위와 같은 색상(H214)·채도로 명도만 내린 것. `--color-text-neutral` 은 흰
     * 배경에서 3.50:1 이라 읽는 글자에 쓰면 WCAG AA(4.5:1)에 미달한다. 읽어야
     * 하는 보조 텍스트는 이쪽을 쓴다 — 흰 5.11 · muted 4.84 · sunken 4.55.
     * 기존 화면이 쓰는 `--color-text-neutral` 은 그대로 둔다 (docs/design/ui-chat.md §4). */
    --color-text-neutral-aa: #656f7b;
    --color-text-disabled: #b2bdca;
    --color-text-inverse: #ffffff;

    /* --- 아이콘 ----------------------------------------------------- */
    --color-icon-secondary: #4b5562;
    --color-icon-tertiary: #808a97;
    --color-icon-muted: #a7afb9;
    --color-icon-inverse: #ffffff;

    /* --- 상태 ------------------------------------------------------- */
    --color-status-error: #c73f40;
    --color-status-error-light: #ffe4e4;

    /* --- 하이라이트 -------------------------------------------------
     * 출처(근거 대조) 전용이다. 검색 매치는 파랑을 쓴다 — 같은 색이 두 가지를
     * 뜻하지 않게 가른 것이 이번 디자인의 핵심이다.
     * 브랜드와 무관하게 두 브랜드가 같은 값을 쓴다. */
    --color-highlight-background: #f6ffa5;
    --color-highlight-primary: #b9ff66;

    /* --- 간격 ------------------------------------------------------- */
    --spacing-2xs: 4px;
    --spacing-xs: 6px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 20px;

    /* --- 크기 · 반경 ------------------------------------------------- */
    --size-control-md: 36px;
    --size-control-sm: 28px;
    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 12px;
    --radius-full: 999px;

    /* --- 본문 타이포 -------------------------------------------------
     * body/md · label/strong 모두 13px / 1.8 / -0.26px 이고 굵기만 다르다. */
    --font-size-heading: 20px;
    --letter-spacing-heading: -0.4px;
    --font-size-control: 13px;
    --line-height-control: 1.8;
    --letter-spacing-control: -0.26px;
}