/* ============================================================
   디자인 토큰 별칭 (T-08)
   app.css의 테마 팔레트와 design-system.css의 --ds-* 값을
   사양서(docs/approval)의 토큰 이름으로 잇는 다리입니다.
   값을 여기서 새로 정하지 않습니다. 테마는 app.css가 정하고,
   이 파일은 이름만 연결하므로 테마 분기가 없습니다.
   ============================================================ */

:root {
    /* 표면 */
    --bg: var(--app-bg);
    --surface-3: var(--surface-hover);

    /* 텍스트 */
    --ink: var(--text);
    --ink-2: var(--muted);
    --ink-3: color-mix(in srgb, var(--muted) 78%, var(--surface));
    --ink-on-accent: #ffffff;

    /* 선 */
    --line: var(--border);
    --line-2: color-mix(in srgb, var(--border) 55%, var(--surface));

    /* 강조 */
    --accent-hover: color-mix(in srgb, var(--accent) 88%, black);

    /* 상태 */
    --ok: var(--ds-success);
    --warn: var(--ds-warning);
    --info: var(--ds-info);

    /* 겹침 층. 모달 배경과 그림자가 이 값을 씁니다. */
    --scrim: rgb(15 23 42 / 52%);
    --scrim-soft: rgb(15 23 42 / 30%);
    --shadow: rgb(15 23 42 / 12%);

    /* 간격 */
    --sp-1: var(--ds-space-1);
    --sp-2: var(--ds-space-2);
    --sp-3: var(--ds-space-3);
    --sp-4: var(--ds-space-4);
    --sp-5: var(--ds-space-5);
    --sp-6: var(--ds-space-6);

    /* 모서리 */
    --r-doc: var(--ds-radius-lg, .75rem);
    --r-card: var(--ds-radius-md, .625rem);
    --r-btn: var(--ds-radius-sm, .5rem);
    --r-pill: 999px;

    /* 문서지. 화면 테마와 무관하게 언제나 흰 종이입니다.
       화면에서 본 그대로 인쇄되어야 하므로 여기서만 값을 정하고 테마 분기를 두지 않습니다. */
    --paper-bg: #ffffff;
    --paper-bg-2: #f7f8fa;
    --paper-bg-3: #f1f3f7;
    --paper-head-bg: #f1f3f7;
    --paper-ink: #172033;
    --paper-ink-2: #46536a;
    --paper-ink-3: #6b7688;
    --paper-line: #9ca7b8;
    --paper-line-2: #c8ced9;
    --paper-line-3: #d8dde7;
    --paper-seal: #d33848;
    --paper-danger: #d33848;
    --paper-shell: #e9edf3;
    --paper-shadow: rgb(0 0 0 / 28%);

    /* 이전 화면들이 쓰는 gw 접두 이름입니다. 폴백 없이 참조하는 곳이 있어 여기서 한 번 이어 둡니다.
       값을 새로 정하지 않고 app.css의 테마 팔레트를 그대로 가리킵니다. */
    --gw-page-bg: var(--app-bg);
    --gw-card-bg: var(--surface);
    --gw-panel-bg: var(--surface-2);
    --gw-input-bg: var(--surface-2);
    --gw-border-color: var(--border);
    --gw-text-color: var(--text);
    --gw-muted: var(--muted);
    --gw-primary: var(--accent-light);
    --gw-active-text: var(--accent-light);
    --gw-danger: var(--ds-danger);
    --gw-success: var(--ds-success);

    /* 성공 안내 상자. 테두리와 배경은 성공색에서 만들어 씁니다. */
    --ok-line: color-mix(in srgb, var(--ds-success) 42%, transparent);
    --ok-soft: color-mix(in srgb, var(--ds-success) 12%, transparent);

    /* 예전 화면들이 쓰는 다른 이름들입니다. 폴백 없이 참조하는 곳이 있어 여기서 이어 둡니다.
       값을 새로 정하지 않고 app.css의 테마 팔레트를 그대로 가리킵니다. */
    --background: var(--app-bg);
    --card-bg: var(--surface);
    --panel-muted: var(--surface-2);
    --surface-soft: var(--surface-2);
    --text-primary: var(--text);
    --text-secondary: var(--muted);
    --brand-primary: var(--accent);
    --primary-soft: var(--accent-soft);
    --on-accent: var(--ink-on-accent);
    --success: var(--ds-success);
    --warning: var(--ds-warning);

    /* 글꼴 */
    --f-body: var(--bs-body-font-family, system-ui, -apple-system, "Segoe UI", sans-serif);
    --f-mono: var(--ds-font-mono);
    --f-display: var(--f-body);
}