/*
 * Alpha WebChat theme SSOT.
 * WebChat, Promptory, CollabBoard, document viewers, and later web surfaces
 * consume these theme, surface, glyph, toolbar, and markdown tokens instead
 * of defining feature-local color or component metric values.
 */
:root {
  color-scheme: dark;
  --arc-bg-0: #0a0d12;
  --arc-bg-1: #0f141b;
  --arc-bg-2: #141a23;
  --arc-bg-3: #1a212c;
  --arc-bg-4: #232b38;
  --arc-line: #232b38;
  --arc-line-strong: #2f3948;
  --arc-fg-0: #e6ebf2;
  --arc-fg-1: #a9b3c1;
  --arc-fg-2: #7d8899;
  --arc-fg-3: #566174;
  --arc-accent: #22d3ee;
  --arc-accent-2: #67e8f9;
  --arc-accent-soft: #123744;
  --arc-accent-line: #246b7f;
  --arc-warn: #fbbf24;
  --arc-err: #f87171;
  --arc-ok: #4ade80;
  --arc-radius-sm: 6px;
  --arc-radius-md: 8px;
  --arc-row-h: 28px;
  --arc-phone-input-h: 110px;
  --arc-phone-keyboard-h: 0px;
  --arc-font-sans: "Malgun Gothic", "맑은 고딕", "Pretendard Variable", "Pretendard", "Geist", ui-sans-serif, system-ui, -apple-system, "SF Pro Text", "Segoe UI", sans-serif;
  /* 3060 parity(준규님 2026-07-07 21:24 실기기 대조): 글리프(⎘❏⌕⎙▥⌨)가
     Android 기본 mono로 폴백되면 얇고 흐리게 렌더 — 3060 tokens.css와 동일한
     Geist Mono 선두 체인으로 통일(웹폰트는 이미 로드됨). */
  --arc-font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --arc-font-size: 13px;
  --arc-line-h: 1.55;
  --arc-markdown-strong-fg: var(--arc-accent-2);
  --arc-markdown-strong-highlight-bg: color-mix(in oklab, var(--arc-accent-line) 58%, var(--arc-bg-0));
  --arc-markdown-strong-font-weight: 450;
  --arc-markdown-underline-height: .22em;
  --arc-markdown-code-bg: var(--arc-chat-agent-bg);
  --arc-markdown-code-fg: var(--arc-accent-2);
  --arc-markdown-code-padding: 1px 4px;
  --arc-markdown-code-radius: 3px;
  --arc-markdown-code-font-size: var(--code-font-size, 12px);
  --arc-markdown-link-font-weight: 500;
  --arc-markdown-codeblock-bg: var(--arc-bg-1);
  --arc-chat-user-bg: color-mix(in oklab, var(--arc-accent) 10%, var(--arc-bg-1));
  --arc-chat-agent-bg: var(--arc-bg-2);
  --arc-surface-toolbar-gap: 4px;
  --arc-surface-toolbar-min-height: 28px;
  --arc-surface-toolbar-padding-y: 3px;
  --arc-surface-toolbar-label-font-size: 11.5px;
  --arc-surface-toolbar-label-font-weight: 600;
  --arc-surface-panel-padding: 8px;
  --arc-surface-panel-padding-phone: 4px;
  --arc-surface-section-gap: 6px;
  --arc-surface-section-gap-compact: 4px;
  --arc-surface-control-height: 22px;
  --arc-surface-control-height-compact: 20px;
  --arc-surface-control-height-roomy: 24px;
  --arc-surface-control-min-width: 22px;
  --arc-surface-control-padding-x: 6px;
  --arc-surface-control-radius: 4px;
  --arc-surface-control-font-size: 12px;
  --arc-surface-control-font-weight: 600;
  --arc-surface-control-line-height: 1;
  --arc-surface-control-transition: color .13s, background .13s, border-color .13s, transform .06s;
  --arc-surface-field-height: 28px;
  --arc-surface-field-padding-x: 10px;
  --arc-surface-caption-font-size: 11px;
  --arc-surface-body-font-size: 12px;
  --arc-surface-meta-font-size: 10px;
  --arc-surface-icon-size: 14px;
  --arc-surface-icon-stroke-width: 1.8;
  --arc-doc-wrap-max-width: 960px;
  --arc-doc-radius: 10px;
  --arc-doc-radius-phone: 8px;
  --arc-doc-font-size: 16px;
  --arc-doc-font-size-phone: 15px;
  --arc-doc-toolbar-gap: 6px;
  --arc-doc-toolbar-padding: 5px 8px;
  --arc-doc-toolbar-radius: 10px;

  --bg-0: var(--arc-bg-0);
  --bg-1: var(--arc-bg-1);
  --bg-2: var(--arc-bg-2);
  --bg-3: var(--arc-bg-3);
  --bg-4: var(--arc-bg-4);
  --line: var(--arc-line);
  --line-strong: var(--arc-line-strong);
  --fg-0: var(--arc-fg-0);
  --fg-1: var(--arc-fg-1);
  --fg-2: var(--arc-fg-2);
  --fg-3: var(--arc-fg-3);
  --accent: var(--arc-accent);
  --accent-2: var(--arc-accent-2);
  --accent-soft: var(--arc-accent-soft);
  --accent-line: var(--arc-accent-line);
  --warn: var(--arc-warn);
  --err: var(--arc-err);
  --ok: var(--arc-ok);
  --r-sm: var(--arc-radius-sm);
  --r-md: var(--arc-radius-md);
  --row-h: var(--arc-row-h);
  --phone-input-h: var(--arc-phone-input-h);
  --phone-keyboard-h: var(--arc-phone-keyboard-h);
  --font-sans: var(--arc-font-sans);
  --font-mono: var(--arc-font-mono);
  --font-size: var(--arc-font-size);
  --line-h: var(--arc-line-h);
}

/* Phone surfaces keep the same component contract while consuming a denser
   metric projection. Feature CSS must use the --arc-surface-* tokens instead
   of adding its own phone-only button and field sizes. The breakpoint matches
   WebChat PanelHost's desktop boundary (`min-width: 720px`). */
@media (max-width: 719px) {
  :root {
    --arc-row-h: 24px;
    --arc-surface-toolbar-gap: 3px;
    --arc-surface-toolbar-min-height: 24px;
    --arc-surface-toolbar-padding-y: 2px;
    --arc-surface-panel-padding: var(--arc-surface-panel-padding-phone);
    --arc-surface-section-gap: var(--arc-surface-section-gap-compact);
    --arc-surface-control-height: 20px;
    --arc-surface-control-height-compact: 18px;
    --arc-surface-control-height-roomy: 22px;
    --arc-surface-control-min-width: 20px;
    --arc-surface-control-padding-x: 5px;
    --arc-surface-field-height: 26px;
    --arc-surface-field-padding-x: 8px;
    --arc-surface-icon-size: 13px;
    --arc-doc-toolbar-gap: 4px;
    --arc-doc-toolbar-padding: 4px 6px;
  }
}

html[data-theme="dark"] {
  color-scheme: dark;
}

/* 3060 light token family, translated into Alpha's shared --arc-* namespace
   instead of copied as app-local --bg/--fg tokens. */
html[data-theme="light"] {
  color-scheme: light;
  --arc-bg-0: #f8f4e8;
  --arc-bg-1: #f8f4e8;
  --arc-bg-2: #f0ebe2;
  --arc-bg-3: #e4ded3;
  --arc-bg-4: #d6cfc2;
  --arc-line: rgba(72, 56, 36, 0.10);
  --arc-line-strong: rgba(72, 56, 36, 0.18);
  --arc-fg-0: #0d1117;
  --arc-fg-1: #1f2937;
  --arc-fg-2: #334155;
  --arc-fg-3: #64748b;
  --arc-accent: #0f5f78;
  --arc-accent-2: #164e63;
  --arc-accent-soft: rgba(15, 95, 120, 0.10);
  --arc-accent-line: rgba(15, 95, 120, 0.38);
  --arc-markdown-code-bg: var(--arc-chat-agent-bg);
  --arc-markdown-codeblock-bg: #f3eee4;
  --arc-chat-agent-bg: #f0ebe2;
}

/* W1-settings: accent recolors (cyan is the active theme's default above).
   These only touch accent-family tokens; theme/background tokens are owned by
   data-theme. */
html[data-accent="violet"] {
  --arc-accent: #a78bfa;
  --arc-accent-2: #c4b5fd;
  --arc-accent-soft: rgba(167, 139, 250, 0.14);
  --arc-accent-line: rgba(167, 139, 250, 0.35);
}

html[data-accent="emerald"] {
  --arc-accent: #10b981;
  --arc-accent-2: #6ee7b7;
  --arc-accent-soft: rgba(16, 185, 129, 0.14);
  --arc-accent-line: rgba(16, 185, 129, 0.35);
}

html[data-accent="amber"] {
  --arc-accent: #f59e0b;
  --arc-accent-2: #fcd34d;
  --arc-accent-soft: rgba(245, 158, 11, 0.14);
  --arc-accent-line: rgba(245, 158, 11, 0.35);
}

html[data-accent="slate"] {
  --arc-accent: #94a3b8;
  --arc-accent-2: #cbd5e1;
  --arc-accent-soft: rgba(148, 163, 184, 0.14);
  --arc-accent-line: rgba(148, 163, 184, 0.35);
}

html[data-theme="light"][data-accent="violet"] {
  --arc-accent: #6d28d9;
  --arc-accent-2: #5b21b6;
  --arc-accent-soft: rgba(109, 40, 217, 0.10);
  --arc-accent-line: rgba(109, 40, 217, 0.32);
}

html[data-theme="light"][data-accent="emerald"] {
  --arc-accent: #047857;
  --arc-accent-2: #065f46;
  --arc-accent-soft: rgba(4, 120, 87, 0.10);
  --arc-accent-line: rgba(4, 120, 87, 0.32);
}

html[data-theme="light"][data-accent="amber"] {
  --arc-accent: #b45309;
  --arc-accent-2: #92400e;
  --arc-accent-soft: rgba(180, 83, 9, 0.10);
  --arc-accent-line: rgba(180, 83, 9, 0.32);
}

html[data-theme="light"][data-accent="slate"] {
  --arc-accent: #475569;
  --arc-accent-2: #334155;
  --arc-accent-soft: rgba(71, 85, 105, 0.10);
  --arc-accent-line: rgba(71, 85, 105, 0.32);
}

html[data-theme="parchment"],
html[data-accent="parchment"] {
  color-scheme: light;
  --arc-bg-0: #f8f4e8;
  --arc-bg-1: #f8f4e8;
  --arc-bg-2: #e8e6dc;
  --arc-bg-3: #dedbd0;
  --arc-bg-4: #d1cdbf;
  --arc-line: #e8e6dc;
  --arc-line-strong: #e5e3d8;
  --arc-fg-0: #141413;
  --arc-fg-1: #3d3d3a;
  --arc-fg-2: #6b6a64;
  --arc-fg-3: #7a786f;
  --arc-accent: #1B365D;
  --arc-accent-2: #2D5A8A;
  --arc-accent-soft: #E4ECF5;
  --arc-accent-line: #b8c7d8;
  --arc-markdown-code-bg: var(--arc-chat-agent-bg);
  --arc-markdown-codeblock-bg: #fffdf8;
  --arc-chat-agent-bg: #f0ebe2;
}

/* Shared editor caret (모든 웹 표면 승계).
   CodeMirror6 baseTheme는 `.ͼN .cm-content { caret-color: black }`를 런타임 주입하는데,
   그 selector 우선순위(0,2,0)가 표면 CSS(0,1,0)보다 높아 다크 배경에서 커서가 안 보였다
   (준규님 2026-07-06). 표면 로컬에서 색을 강제하지 말고 여기서 테마 전경색(--arc-fg-0)으로
   승계한다. --arc-fg-0는 테마별 자동 전환(다크=밝음, parchment=어두움)이라 어느 배경에서도 보인다.
   CM 주입을 이기기 위해 !important 필요(지티 font-family 강제와 동일 사유). */
.cm-content { caret-color: var(--arc-fg-0) !important; }
.cm-cursor,
.cm-dropCursor { border-left-color: var(--arc-fg-0) !important; }

/* Shared editor font -- CM6 injects its own font-family (same as the caret
   above), so force the theme sans with !important; every CM surface then
   inherits it. Promoted from collabboard's local override (지티 0d5acc8) so the
   font lives with the theme instead of being hardcoded per surface
   (준규님 2026-07-06). */
.cm-editor, .cm-scroller, .cm-content, .cm-line { font-family: var(--arc-font-sans) !important; }