/* Created: 2026-07-08
 * Purpose: portal.kyte.kr 공용 디자인 토큰 (JIRA_DESIGN_PRINCIPLES.md §1.1 정본 토큰셋).
 *          Atlassian Design System 색상/스페이싱/라운드 값을 CSS custom property로 고정.
 *          이 파일은 토큰 정의만 담는다 — 컴포넌트 클래스(.btn 등)는 각 페이지에 남긴다.
 * Dependencies: none (순수 CSS)
 * Test Status: tests/test_design_compliance.py (hex는 이 파일 안에서만 허용)
 */
:root{
  /* typography — 포털에 monospace 스택이 네 벌 흩어져 있다(llm-logs·chat 3곳).
     새 페이지는 이 토큰을 쓴다. 색이 아니라 폰트라 다크 모드 오버라이드는 없다. */
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, "Cascadia Code", monospace;

  /* color.text */
  --color-text:#172B4D;
  --color-text-subtle:#44546F;
  --color-text-subtlest:#626F86;
  --color-text-inverse:#FFFFFF;
  --color-text-selected:#0052CC;

  /* elevation.surface */
  --surface:#FFFFFF;
  --surface-sunken:#F4F5F7;
  --surface-hovered:#F1F2F4;
  --surface-pressed:#DCDFE4;

  /* color.border */
  --border:#DFE1E6;
  --border-focused:#4C9AFF;
  --border-success:#ABF5D1;
  --border-danger:#FFBDAD;

  /* color.background — brand / neutral / selected */
  --background-brand-bold:#0052CC;
  --background-brand-bold-hovered:#0747A6;
  --background-brand-bold-disabled:#B3CDF5;
  --background-neutral:#F1F2F4;
  --background-neutral-hovered:#DCDFE4;
  --background-selected:#E9F2FF;

  /* color.background/text — semantic (§3.1) */
  --background-success:#E3FCEF; --text-success:#006644;
  --background-warning:#FFF0B3; --text-warning:#7F5F01;
  --background-danger:#FFEBE6;  --text-danger:#BF2600;
  --background-info:#DEEBFF;    --text-info:#0747A6;
  --status-backlog:var(--color-text-subtle);
  --status-committed:var(--text-info); --status-started:var(--text-info);
  --status-completed:var(--text-success); --status-cancelled:var(--text-danger);

  /* chart (§16) */
  --chart-brand:#0052CC; --chart-danger:#DE350B; --chart-success:#00875A;

  /* space (8px scale, §5) */
  --space-050:4px; --space-100:8px; --space-150:12px;
  --space-200:16px; --space-300:24px; --space-400:32px;

  /* radius (§9) */
  --radius-small:3px; --radius-medium:4px; --radius-large:8px;

  /* shared portal shell */
  --page-content-max:1200px;
  --page-content-narrow:920px;
}

/* dark mode (§15) — KT-432. 시맨틱 토큰 단위로만 재정의, 수동 색반전 없음.
 * 대비율은 WCAG 상대휘도 공식으로 실측(추측 아님) — Linear KT-432 코멘트에 계산표.
 * --color-text-inverse(#FFFFFF)는 두 모드 모두 "브랜드/진한 배경 위 밝은 텍스트" 역할이 동일해
 * 재정의하지 않음(라이트 :root 값 그대로 상속).
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]){
    /* color.text */
    --color-text:#B6C2CF;
    --color-text-subtle:#9FADBC;
    --color-text-subtlest:#8C9BAB;
    --color-text-selected:#579DFF;

    /* elevation.surface */
    --surface:#1D2125;
    --surface-sunken:#161A1D;
    --surface-hovered:#2C333A;
    --surface-pressed:#38414A;

    /* color.border — 기본 --border 는 구조적 구분선(WCAG 1.4.11 은 장식/비필수 요소는
       비대상)이라 3:1 미달이어도 의도된 값. --border-focused 등 상호작용 상태 표시는 3:1 확보. */
    --border:#38414A;
    --border-focused:#388BFF;
    --border-success:#2ABB7F;
    --border-danger:#E2483D;

    /* color.background — brand / neutral / selected */
    --background-brand-bold:#0C66E4;
    --background-brand-bold-hovered:#1868DB;
    --background-brand-bold-disabled:#1E3A5F;
    --background-neutral:#333B43;
    --background-neutral-hovered:#43505E;
    --background-selected:#112A52;

    /* color.background/text — semantic (§3.1) */
    --background-success:#164B35; --text-success:#4BCE97;
    --background-warning:#533F04; --text-warning:#F5CD47;
    --background-danger:#5D1F1A;  --text-danger:#FD9891;
    --background-info:#09326C;    --text-info:#85B8FF;
    --status-backlog:var(--color-text-subtle);
    --status-committed:var(--text-info); --status-started:var(--text-info);
    --status-completed:var(--text-success); --status-cancelled:var(--text-danger);

    /* chart (§16) */
    --chart-brand:#579DFF; --chart-danger:#F87168; --chart-success:#4BCE97;
  }
}

/* chat.html은 OS 기본값을 따르되 사용자가 선택한 모드를 명시적으로 우선한다. */
:root[data-theme="dark"]{
  --color-text:#B6C2CF; --color-text-subtle:#9FADBC; --color-text-subtlest:#8C9BAB; --color-text-selected:#579DFF;
  --surface:#1D2125; --surface-sunken:#161A1D; --surface-hovered:#2C333A; --surface-pressed:#38414A;
  --border:#38414A; --border-focused:#388BFF; --border-success:#2ABB7F; --border-danger:#E2483D;
  --background-brand-bold:#0C66E4; --background-brand-bold-hovered:#1868DB; --background-brand-bold-disabled:#1E3A5F;
  --background-neutral:#333B43; --background-neutral-hovered:#43505E; --background-selected:#112A52;
  --background-success:#164B35; --text-success:#4BCE97; --background-warning:#533F04; --text-warning:#F5CD47;
  --background-danger:#5D1F1A; --text-danger:#FD9891; --background-info:#09326C; --text-info:#85B8FF;
  --chart-brand:#579DFF; --chart-danger:#F87168; --chart-success:#4BCE97;
}