/* ⚠️ 자동 생성 파일 — 직접 수정 금지. 원본(SSOT) = src/tokens.css. `npm run build`로 재생성됩니다.
   :root판(비-Tailwind 소비자용) — @theme → :root 치환. 값 유실 0.
   ★ Tailwind 유틸리티 클래스(text-day-sunday 등) 자동 생성 기능은 이 판에 없음(의도적) —
   순수 CSS 변수만 제공한다. 유틸리티가 필요하면 tokens.theme.css(@theme판)를 쓸 것. */

/* ============================================================
   디자인 토큰 단일 소스 — D-1 (docs/04 제약 3)
   전 사내툴 공통 디자인시스템의 원천. 하드코딩 산재 금지.
   토스(Toss) 시안 기반 프리미티브 + 시맨틱 별칭.
   ⚠️ 상태/셀렉트 색은 여기 넣지 않는다 — DB(WorkspaceStatus.color 등) 데이터.
   ============================================================ */
:root {
  /* ── 폰트 ── (Tailwind preflight 가 html 에 적용 → 전역 Pretendard) */
  --font-sans: "Pretendard Variable", "Pretendard", -apple-system,
    BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Malgun Gothic",
    "맑은 고딕", sans-serif;

  /* ── 프리미티브: 브랜드 ── */
  --color-brand-blue: #1428a0; /* 로고/마케팅 전용 · UI 액션색 아님 (박스 F-1: 오프너 네이비로 교체) */

  /* ── 프리미티브: 무채색 ── */
  --color-black: #000000;
  --color-black-dim: #2b2b2b;

  /* ── 프리미티브: 블루 ── (박스 F-1: 토스 블루 → 오프너 네이비로 교체) */
  --color-blue-50: #eaedfa;
  --color-blue-400: #2563eb; /* 밝은 파랑. 브랜드 네이비(500=#1428a0)와 별개 — 요일·강조용 (박스 P-2) */
  --color-blue-500: #1428a0;
  --color-blue-600: #0f1f7a;

  /* ── 프리미티브: 그레이 스케일 ── */
  --color-grey-50: #f9fafb;
  --color-grey-100: #f2f4f6;
  --color-grey-200: #e5e8eb;
  --color-grey-300: #d1d6db;
  --color-grey-400: #b0b8c1;
  --color-grey-500: #8b95a1;
  --color-grey-600: #6b7684;
  --color-grey-700: #4e5968;
  --color-grey-800: #333d4b;
  --color-grey-900: #191f28;

  /* ── 프리미티브: 시그널 색 ── */
  --color-red-500: #f04452;
  --color-green-500: #03b26c;
  --color-orange-500: #fe9800;
  --color-yellow-500: #ffc342;
  --color-teal-500: #18a5a5;
  --color-purple-500: #a234c7;

  /* ── 시맨틱: 액션/링크 ── */
  /* 주요 액션색 = UI 블루(링크·레일 활성·진행률과 동일 blue-500). 앱 전역 정합.
     brand-blue(#0064ff)는 로고/마케팅 전용(spec)이라 미사용 — 필요시 여기만 교체 */
  --color-primary: var(--color-blue-500);
  --color-primary-hover: var(--color-blue-600);
  --color-on-primary: #ffffff;
  --color-link: var(--color-blue-500);
  --color-link-hover: var(--color-blue-600);

  /* ── 시맨틱: 표면 ── */
  /* canvas·card = 의도적 동일값(#ffffff) · 합치지 말 것 — canvas는 페이지 바탕, card는 그 위에 뜨는
     개별 객체로 의미가 다르다(향후 카드 틴트·다크모드에서 분리 필요). 박스 F-4 */
  --color-canvas: #ffffff;
  /* surface/surface-sunken: 박스 F-4에서 이름 교환(값은 프리미티브 참조로 유지 — 렌더 무변경).
     surface-sunken이 더 어두워야 의미가 맞다(레일·사이드바처럼 내려앉은 낮은 표면) */
  --color-surface: var(--color-grey-50);
  --color-surface-sunken: var(--color-grey-100);
  /* canvas·card = 의도적 동일값(#ffffff) · 합치지 말 것 — 사유는 위 canvas 주석 참조 */
  --color-card: #ffffff;
  --color-info-surface: var(--color-blue-50);
  --color-overlay-scrim: rgba(0, 0, 0, 0.5);

  /* ── 시맨틱: 전경(텍스트) ── */
  --color-fg: var(--color-grey-900);
  --color-fg-strong: var(--color-grey-800);
  --color-fg-body: var(--color-grey-700); /* 박스 F-1: grey-600(흐림) → grey-700(가독성 교정) */
  --color-fg-muted: var(--color-grey-600); /* 박스 F-1: grey-500 → grey-600 */
  --color-fg-placeholder: var(--color-grey-400); /* 유지 */

  /* ── 시맨틱: 경계/구분 ── */
  --color-border: var(--color-grey-200);
  --color-border-strong: var(--color-grey-300);
  --color-divider: var(--color-grey-200);
  --color-focus-ring: var(--color-black);

  /* ── 시맨틱: 상태(피드백) ── */
  --color-success: var(--color-green-500);
  --color-error: var(--color-red-500);
  --color-warning: var(--color-orange-500);
  --color-caution: var(--color-yellow-500);

  /* ── 시맨틱: 요일 (달력 요일색 — 상태색과 개념 분리, 박스 P-2) ── */
  --color-day-sunday: var(--color-red-500); /* #f04452, 기존 error와 동일 hex(무변경) */
  --color-day-saturday: var(--color-blue-400); /* #2563eb, 신규 또렷한 파랑 — --color-link(네이비)와 분리 */
  --color-day-holiday: var(--color-red-500); /* #f04452, E-8 공휴일 표시용 선정의(현재 미소비) */

  /* ── 시맨틱: 채팅 (박스 F-2 B-1) ── */
  /* 내 메시지 버블 전용 — info-surface(정보성 배경 강조)와 값은 같은 프리미티브를 참조하지만
     의미가 달라 별도 토큰으로 분리(재사용 시 시맨틱 오용 방지). */
  --color-chat-bubble-me: var(--color-blue-50);
  --color-chat-bubble-me-fg: var(--color-primary);

  /* ── 라운드 ── (원형은 컴포넌트에서 rounded-full / 50%) */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* ── 레이아웃: 사이드바·레일 폭 ── (박스 F-1 사이드바, 박스 U-3 레일 — 단일 소스)
     --width-* 는 Tailwind 네임스페이스라 w-sidebar·w-rail 유틸이 자동 생성된다(실빌드로 확인, 박스 U-3).
     임의값 문법(w-[var(--width-*)])으로 우회하지 말 것 — 그냥 w-sidebar / w-rail 로 참조한다. */
  --width-sidebar: 268px;
  --width-rail: 64px;

  /* ── 그림자 ── (이름 신규 → 기존 shadow-sm/md/lg 유틸과 무충돌) */
  --shadow-card: 0 2px 8px rgba(20, 20, 40, 0.05);
  --shadow-card-sm: 0 1px 4px rgba(20, 20, 40, 0.04);
  --shadow-drawer: -8px 0 40px rgba(20, 20, 40, 0.14);
  --shadow-modal: 0 16px 50px rgba(20, 20, 40, 0.22);

  /* ── 타이포 스케일 ── (시안 named 스케일 — D-2)
     text-<name> 유틸 = font-size + line-height + font-weight 동시 적용.
     기본 Tailwind text-xs/sm/base/lg/xl 등과 이름 무충돌(회귀 없음).
     숫자(금액·카운트)는 컴포넌트에서 tabular-nums 유틸 병용.
     weight: font-normal400 / font-medium500 / font-semibold600 / font-bold700 */
  --text-display-hero: 30px;
  --text-display-hero--line-height: 40px;
  --text-display-hero--font-weight: 700;
  --text-display-lg: 26px;
  --text-display-lg--line-height: 36px;
  --text-display-lg--font-weight: 700;
  --text-heading-lg: 22px;
  --text-heading-lg--line-height: 30px;
  --text-heading-lg--font-weight: 700;
  --text-heading: 20px;
  --text-heading--line-height: 28px;
  --text-heading--font-weight: 600;
  --text-subtitle: 16px;
  --text-subtitle--line-height: 24px;
  --text-subtitle--font-weight: 600;
  --text-body-lg: 16px;
  --text-body-lg--line-height: 24px;
  --text-body-lg--font-weight: 400;
  --text-body: 14px;
  --text-body--line-height: 22px;
  --text-body--font-weight: 400;
  --text-body-sm: 13px;
  --text-body-sm--line-height: 20px;
  --text-body-sm--font-weight: 400;
  --text-caption: 12px;
  --text-caption--line-height: 18px;
  --text-caption--font-weight: 400;
}