/* 생성물 — 손으로 고치지 마라. 웹(관리자 콘솔 · 랜딩)용 토큰. M1-N-10 · 07 D6-11.
 * 정본: docs-claude/design/tokens/aai-tokens.json — 데스크톱 aai-tokens.css 와 **같은 JSON, 같은 렌더 함수**다.
 * 생성: node scripts/design/aai-tokens-to-css.mjs · 검사: scripts/ci/check-design-tokens.mjs 규칙 A
 *
 * 데스크톱 생성물과 다른 점은 다크 방아쇠 하나뿐이다: 데스크톱은 `:root.dark`(테마 고르개),
 * 웹은 `@media (prefers-color-scheme: dark)`(랜딩 CSP 가 스크립트를 0 으로 막는다).
 * 색·간격·반경·글자 값은 데스크톱과 한 글자도 다르지 않다. */

:root {
  color-scheme: light dark;
  /* 무채색 — 라이트 (a11y 'always' 보정 반영. 레퍼런스 원값은 -ref) */
  --aai-canvas: #FFFFFF;
  --aai-canvas-alt: #FCFCFC;
  --aai-sidebar: #F9F9FB;
  --aai-sunken: #F4F4F4;
  --aai-field: #F0F0F0;
  --aai-bubble: #EEEEEE;
  --aai-row-hover: #F2F3F3;
  --aai-row-selected: #EBEBEE;
  --aai-row-selected-strong: #E1E1E1;
  --aai-choice-row: #E8E8E8;
  --aai-hairline: #E7E7E9;
  --aai-border: #DDDDDE;
  --aai-border-strong: #D9D9D9;
  --aai-text-faint: #B6B6B6;
  --aai-text-faint-ref: #B6B6B6;
  --aai-text-label: #A7A6A9;
  --aai-text-label-ref: #A7A6A9;
  --aai-text-muted: #6A6A6A;
  --aai-text-muted-ref: #717171;
  --aai-text-secondary: #666666;
  --aai-text: #141414;
  --aai-primary: #070707;
  --aai-primary-pure: #000000;
  --aai-on-primary: #FFFFFF;
  --aai-scrim: #888888;
  --aai-canvas-deep: #FFFFFF;
  --aai-raised: #FFFFFF;
  --aai-card: #FFFFFF;
  --aai-user-bubble: #E1E1E1;
  /* 포인트 팔레트 */
  --aai-point-black: #000000;
  --aai-on-point-black: #FFFFFF;
  --aai-point-black-strong: #000000;
  --aai-point-brown: #9B7A58;
  --aai-on-point-brown: #FFFFFF;
  --aai-point-brown-strong: #9B7A58;
  --aai-point-red: #E85057;
  --aai-on-point-red: #FFFFFF;
  --aai-point-red-strong: #E85057;
  --aai-point-orange: #EC7F39;
  --aai-on-point-orange: #FFFFFF;
  --aai-point-orange-strong: #D97535;
  --aai-point-yellow: #F2B252;
  --aai-on-point-yellow: #141414;
  --aai-point-yellow-strong: #BD8B40;
  --aai-point-green: #61C57A;
  --aai-on-point-green: #FFFFFF;
  --aai-point-green-strong: #4FA163;
  --aai-point-teal: #61C0B0;
  --aai-on-point-teal: #FFFFFF;
  --aai-point-teal-strong: #4F9D90;
  --aai-point-blue: #4E92F7;
  --aai-on-point-blue: #FFFFFF;
  --aai-point-blue-strong: #4E92F7;
  --aai-point-purple: #A182F7;
  --aai-on-point-purple: #FFFFFF;
  --aai-point-purple-strong: #9B7DED;
  --aai-point-pink: #EA6AAF;
  --aai-on-point-pink: #FFFFFF;
  --aai-point-pink-strong: #E166A8;
  --aai-point-gray: #959595;
  --aai-on-point-gray: #FFFFFF;
  --aai-point-gray-strong: #8F8F8F;
  --aai-point-eye: #FCFCFC;
  --aai-point-pupil: #141414;
  --aai-avatar-shadow: rgba(0, 0, 0, 0.14);
  /* 상태 */
  --aai-link: #36599F;
  --aai-added: #2F8F4E;
  --aai-deleted: #AB352C;
  --aai-warning: #CF5E28;
  --aai-attention: #F6C543;
  --aai-unread: #2F65BB;
  /* 반경 */
  --aai-radius-xs: 6px;
  --aai-radius-sm: 8px;
  --aai-radius-md: 12px;
  --aai-radius-lg: 18px;
  --aai-radius-xl: 24px;
  --aai-radius-pill: 9999px;
  /* 간격 — 4px 격자를 rem 으로 싣는다. ⌘+/− 확대는 루트 글자 크기를 바꾸므로 px 간격은 확대를 따라가지 않는다(app/CLAUDE.md). */
  --aai-space-base: 0.25rem;
  --aai-space-row-sidebar: 1.75rem;
  --aai-space-row-menu: 2rem;
  --aai-space-row-choice: 2.25rem;
  --aai-space-row-conversation: 3rem;
  --aai-space-gutter: 0.75rem;
  --aai-space-panel-padding: 1rem;
  --aai-space-card-padding: 1rem;
  --aai-space-column-conversation: 45rem;
  /* 글자 — 02 §3. 크기는 rem(app/CLAUDE.md 'rem, never px'). 웹 두 화면(관리자·랜딩)이 이 값을 읽는다 */
  --aai-font: "Inter Variable", Pretendard, -apple-system, "Segoe UI", sans-serif;
  --aai-font-mono: "JetBrains Mono", ui-monospace, monospace;
  --aai-type-caption: 0.75rem;
  --aai-type-body-sm: 0.8125rem;
  --aai-type-body: 0.875rem;
  --aai-type-title-sm: 1rem;
  --aai-type-title: 1.25rem;
  --aai-type-display: 1.75rem;
  --aai-weight-regular: 400;
  --aai-weight-medium: 500;
  --aai-weight-semibold: 600;
  /* 층 */
  --aai-elev-card: 0 0 0 1px #DDDDDE;
  --aai-elev-popover: 0 0 0 1px #DDDDDE, 0 12px 32px -8px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.04);
  --aai-elev-composer: 0 0 0 1px #D9D9D9, 0 -6px 16px -6px rgba(0,0,0,0.06);
  --aai-elev-modal: 0 24px 64px -12px rgba(0,0,0,0.25);
  --aai-elev-scrim: rgba(0,0,0,0.45);
  /* 움직임 — 기존 --motion-* 에 없는 것만 (04-motion) */
  --aai-spring: linear(0, 0.25 8%, 0.9 22%, 1.06 30%, 1.02 40%, 0.99 55%, 1);
  --aai-stagger: 30ms;
  /* 아바타 움직임 주기 (05-agent-avatar §4) */
  --aai-avatar-blink: 120ms;
  --aai-avatar-scan: 1600ms;
  --aai-avatar-orbit: 2400ms;
  --aai-avatar-lean: 2000ms;
  --aai-avatar-breath: 4000ms;
  --aai-avatar-spin: 720ms;
  --aai-avatar-bounce: 500ms;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* 무채색 — 다크(Codex 차콜) */
    --aai-canvas: #181818;
    --aai-canvas-deep: #1C1C1C;
    --aai-sidebar: #222222;
    --aai-raised: #232323;
    --aai-card: #2D2D2D;
    --aai-bubble: #2E2E2E;
    --aai-row-selected: #333333;
    --aai-border: #3C3C3C;
    --aai-border-strong: #4E4E4E;
    --aai-text-faint: #787878;
    --aai-text-faint-ref: #6D6D6D;
    --aai-text-label: #747474;
    --aai-text-label-ref: #747474;
    --aai-text-muted: #9A9A9A;
    --aai-text: #FCFCFC;
    --aai-primary: #FAFAFA;
    --aai-on-primary: #070707;
    --aai-canvas-alt: #1C1C1C;
    --aai-hairline: #343434;
    --aai-field: #303030;
    --aai-sunken: #242424;
    --aai-row-hover: #2A2A2A;
    --aai-row-selected-strong: #3C3C3C;
    --aai-choice-row: #373737;
    --aai-text-secondary: #AAAAAA;
    --aai-primary-pure: #FFFFFF;
    --aai-scrim: #0B0B0B;
    --aai-user-bubble: #2E2E2E;
    /* 포인트 — 다크에서 사라지는 색만 뒤집고, strong 은 다크 캔버스 기준으로 다시 계산 */
    --aai-point-black: #E6E6E6;
    --aai-point-black-strong: #E6E6E6;
    --aai-point-brown-strong: #9B7A58;
    --aai-point-red-strong: #E85057;
    --aai-point-orange-strong: #EC7F39;
    --aai-point-yellow-strong: #F2B252;
    --aai-point-green-strong: #61C57A;
    --aai-point-teal-strong: #61C0B0;
    --aai-point-blue-strong: #4E92F7;
    --aai-point-purple-strong: #A182F7;
    --aai-point-pink-strong: #EA6AAF;
    --aai-point-gray-strong: #959595;
    --aai-avatar-shadow: rgba(0, 0, 0, 0.55);
    --aai-link: #6286CB;
    --aai-added: #4FB36B;
    --aai-deleted: #E45248;
    --aai-warning: #E0773F;
    --aai-unread: #4E92F7;
    --aai-elev-card: 0 0 0 1px #3A3A3A;
    --aai-elev-popover: 0 0 0 1px #3A3A3A, 0 12px 32px -8px rgba(0,0,0,0.6);
    --aai-elev-composer: 0 0 0 1px #4E4E4E;
    --aai-elev-modal: 0 24px 64px -12px rgba(0,0,0,0.7);
    --aai-elev-scrim: rgba(0,0,0,0.55);
  }
}

/* 대비 증가 — OS 설정만 본다(웹에는 앱 설정 화면이 없다). */
@media (prefers-contrast: more) {
  :root {
    --aai-text-label: #727173;
    --aai-text-faint: #898989;
  }
}
@media (prefers-color-scheme: dark) and (prefers-contrast: more) {
  :root {
    --aai-text-label: #898989;
  }
}