/* 디자인 토큰 — 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-2xs: 4px;
    --radius-xs: 6px;
    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 12px;
    /* 모바일 바텀 시트의 위 모서리 */
    --radius-xl: 18px;
    --radius-full: 999px;
    /* 칩. --radius-full 과 같은 알약 모양이지만 값이 달라 따로 둔다 */
    --radius-pill: 100px;
    /* 원(50%) · 막대 두께의 절반(1px, 2px) · 0 은 요소 크기에서 나오는 값이라 토큰으로 두지 않는다 */

    /* --- 본문 타이포 -------------------------------------------------
     * 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;

    /* --- 글자 크기 -------------------------------------------------
     * px 계단. 13px 컨트롤 · 본문은 위의 --font-size-control 이다. */
    --font-size-2xs: 11px;
    --font-size-xs: 12px;
    /* 컨트롤 글자가 아닌 13px — 20px 단추 안의 기호 */
    --font-size-sm: 13px;
    --font-size-md: 14px;
    --font-size-lg: 16px;
    --font-size-xl: 18px;
    --font-size-2xl: 24px;

    /* rem 계단. 루트 글자 크기(브라우저 기본 16px)를 따르므로 같은 크기로 보여도
     * px 계단과 따로 둔다. 번호는 작은 것부터의 순서다. */
    --font-size-rem-1: 0.68rem;
    --font-size-rem-2: 0.7rem;
    --font-size-rem-3: 0.72rem;
    --font-size-rem-4: 0.75rem;
    --font-size-rem-5: 0.78rem;
    --font-size-rem-6: 0.8rem;
    --font-size-rem-7: 0.85rem;
    --font-size-rem-8: 0.875rem;
    --font-size-rem-9: 0.9rem;
    --font-size-rem-10: 0.95rem;
    --font-size-rem-11: 1rem;
    --font-size-rem-12: 1.05rem;
    --font-size-rem-13: 1.1rem;
    --font-size-rem-14: 1.2rem;
    --font-size-rem-15: 1.3rem;
    --font-size-rem-16: 1.4rem;
    --font-size-rem-17: 1.5rem;

    /* 둘러싼 글자에 대한 비율 — 문장 안의 code */
    --font-size-code: 0.85em;
    /* 인쇄(print.css) 전용 */
    --font-size-print-sm: 9pt;
    --font-size-print-md: 10pt;

    /* --- 글꼴 ------------------------------------------------------- */
    --font-family-base: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
    /* 로그인 · 관리 화면. 첫 글꼴은 같고 대체 글꼴 목록만 짧다 */
    --font-family-base-short: 'Pretendard', system-ui, sans-serif;
}

/* 브랜드마다 다른 토큰 값은 `html[data-brand="<브랜드 키>"] { ... }` 블록에 덮어쓴다.
 * 이 선택자는 `:root` 보다 구체성이 높아 이긴다. 같은 이름이면 <html style> 의 --brand-* 가 이긴다. */