/* =====================================================================
   Vignette — 디자인 토큰 (단일 진실원본)
   출처: docs/dev_dashboard.html :root + docs/DESIGN_CONCEPT.md §3
   primitive(원시값) → semantic(의미 별칭) 2계층. 컴포넌트는 semantic만 참조.
   다크모드/역할별 accent는 이 파일 하단 1곳에서만 스왑.
   철칙: 순흑/순백 금지(paper/ink 토큰만), border-left 강조선 금지,
        강조는 weight+accent텍스트+tint배경+kicker로만.
   ===================================================================== */

:root {
  /* ── Primitive: Neutral (따뜻한 종이 + 쿨 슬레이트) §3.1 ── */
  --paper: #fbfaf8; /* 본문 배경: 따뜻한 종이색 (순백 아님) */
  --paper-1: #fbfaf8; /* 구형 페이지 alias */
  --paper-2: #f4f2ee; /* 카드/패널 미세 단차 (테두리 대신 톤차) */
  --surface: #ffffff; /* 카드 표면 */
  --neutral-100: #eceff1; /* 표면 hover / subtle fill */
  --neutral-150: #e5e1da; /* 카드 보더 baseline = hairline */
  --neutral-200: #d5dbde; /* divider 진함 */
  --neutral-400: #98a4a9; /* placeholder / disabled */

  --ink: #1c2a2a; /* 본문 텍스트: 잉크 네이비-그린 (순흑 아님) */
  --ink-2: #5a6663; /* 보조 텍스트: 슬레이트 */
  --ink-3: #93a09c; /* 캡션/메타 */
  --hair: #e5e1da; /* 1px 헤어라인 (구역 분리는 이걸로) */

  /* ── Sage-Teal (주 악센트 = 상담/신뢰), 화면당 1곳 배급 §3.2 ── */
  --accent: #3e7a6e; /* ★ 메인 악센트. 흰 배경 대비 5.0:1 AA */
  --accent-deep: #316257; /* hover / 진한 강조 텍스트 */
  --accent-tint: #eef4f2; /* 악센트 배경 틴트 (콜아웃·선택·active) */
  --accent-bright: #5f968b; /* dot·진행바 fill */

  /* ── Terracotta (보조 악센트 = 학습/온기), 저채도, 화면당 1곳 ── */
  --clay: #b0735c; /* ★ 보조 악센트 (학습자 온기, 내담자 측 신호) */
  --clay-deep: #94604c;
  --clay-tint: #f6f0ec;

  /* ── 의미색 (Semantic feedback) — solid + tint 페어 §3.3 ── */
  /* 긍정 = 녹색 (상담 진전·라포·가드레일 통과·잘함) */
  --pos-text: #2c6e49;
  --pos-solid: #3b8c5e;
  --pos-tint: #e8f3ec;
  /* 주의 = 앰버 (라포 약화·과도한 침묵·페이싱) */
  --warn-text: #8a5a00;
  --warn-solid: #c28a2c;
  --warn-tint: #faf1e0;
  /* 위험 = 적색 (가드레일 위반·세션 강제중단·임상적 위급) — 오직 진짜 위급만 */
  --crit-text: #a8352c;
  --crit-solid: #c4453a;
  --crit-tint: #faeae8;
  /* 정보 = 슬레이트블루 (평가 AI 피드백·시스템 안내, 중립) */
  --info-text: #2e5a7a;
  --info-solid: #3c7299;
  --info-tint: #eaf1f6;
  --neutral-sig: #8895a2; /* 데이터 없음·미평가 */

  /* ── 시맨틱 별칭 (라이트 모드) §3.4 ── */
  --bg-app: var(--paper); /* 앱 캔버스 */
  --bg-surface: var(--surface); /* 카드/패널 */
  --bg-surface-2: var(--paper-2); /* 중첩 표면/입력 */
  --bg-tint: var(--accent-tint); /* 선택·강조 배경 */
  --bg-stage: #1e2724; /* 내담자 아바타 영역 (깊은 차콜그린) */

  --text-strong: var(--ink); /* 제목 */
  --text-body: var(--ink-2); /* 본문 보조 */
  --text-muted: var(--ink-3); /* 캡션 */
  --text-on-accent: #fbfaf8; /* accent 버튼 위 텍스트 */

  --border-subtle: var(--neutral-150);
  --border-strong: var(--neutral-200);
  --border-focus: var(--accent);
  --focus-ring: rgba(62, 122, 110, 0.45);

  /* ── 타이포그래피 §3.6 ── */
  --font-sans: "Pretendard Variable", Pretendard, -apple-system,
    "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
  --font-serif: "Noto Serif KR", "Source Serif 4", serif; /* 랜딩 헤드만 */
  --font-num: "Pretendard Variable", "JetBrains Mono", ui-monospace, monospace;

  /* 타입 스케일 (기준 16px / 1.6, 위계는 크기보다 weight) */
  --fs-display: 2.5rem; /* 40 / 표지·랜딩 대제목 */
  --fs-h1: 1.875rem; /* 30 / 페이지 제목 */
  --fs-h2: 1.5rem; /* 24 / 섹션 제목 */
  --fs-h3: 1.25rem; /* 20 / 카드·패널 제목 */
  --fs-lead: 1.125rem; /* 18 / 리드 문장 */
  --fs-body: 1rem; /* 16 / 본문 기본 */
  --fs-sm: 0.875rem; /* 14 / 보조·폼 라벨 */
  --fs-xs: 0.8125rem; /* 13 / 캡션·메타·배지 */
  --fs-kicker: 0.75rem; /* 12 / 상단 kicker 소제목 */

  /* ── 스페이싱 (8pt 기반) §3.7 ── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  /* ── 그리드·형태 §3.8 ── */
  --maxw: 1200px; /* 대시보드 콘텐츠 최대폭 */
  --maxw-read: 680px; /* 읽기 영역 */
  --border: var(--border-subtle);
  --font-mono: var(--font-num);
  --nav-w: 240px; /* 좌측 네비 펼침 */
  --nav-w-collapsed: 72px; /* 좌측 네비 아이콘 only */
  --topbar-h: 56px;
  --radius: 8px; /* 카드/버튼 (거의 직각) */
  --radius-sm: 6px; /* 입력·칩 */
  --radius-lg: 12px; /* 패널 */
  --gutter: 24px;

  --shadow-sm: 0 1px 2px rgba(28, 42, 42, 0.05);
  --shadow-md: 0 4px 14px rgba(28, 42, 42, 0.07); /* 모달·팝오버만 */

  /* ── 래스터 디자인 요소 ── */
  --asset-warm-elements: url("/design-elements/clinical-paper-ambient.png");
  --asset-login-room: url("/design-elements/login-counseling-room.png");

  /* ── 모션 §3.9 ── */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.45, 0.05, 0.55, 0.95);
  --dur-fast: 120ms; /* hover·포커스 */
  --dur-base: 200ms; /* 버튼·토글·드롭다운 */
  --dur-slow: 320ms; /* 패널 전환·모달 */
  --dur-breathe: 3200ms; /* 음성 호흡 펄스 */
}

/* ── 다크 모드 (gloom 회피 — 충분한 밝은 면 + 절제된 악센트) §3.5 ── */
[data-theme="dark"] {
  --paper: #0f1715;
  --paper-1: #111b18;
  --paper-2: #17211f;
  --surface: #1b2724;
  --neutral-100: #24322e;
  --neutral-150: #2c3b36;
  --neutral-200: #3a4b45;
  --neutral-400: #7c8d88;

  --ink: #eef6f3;
  --ink-2: #c6d3cf;
  --ink-3: #8a9b96;
  --hair: #2c3b36;

  --bg-app: #0e1714;
  --bg-surface: #17231f;
  --bg-surface-2: #22302c;
  --bg-tint: #1d302b;
  --bg-stage: #0e1614;
  --text-strong: #eaf0f1;
  --text-body: #c4cfd3;
  --text-muted: #88969c;
  --text-on-accent: #0f1a17;
  --border-subtle: #2a363c;
  --border-strong: #38454c;
  --border-focus: #6fb3a4;
  --accent: #6fb3a4;
  --accent-deep: #84c2b4;
  --accent-tint: #1e2e2a;
  --accent-bright: #6fb3a4;
  --clay: #cc8f77;
  --clay-deep: #e0aa92;
  --clay-tint: #2b211e;
  --focus-ring: rgba(111, 179, 164, 0.45);

  --pos-text: #7fd0a0;
  --pos-solid: #5fb682;
  --pos-tint: #16271d;
  --warn-text: #e2b566;
  --warn-solid: #d4a24a;
  --warn-tint: #2a2415;
  --crit-text: #e89086;
  --crit-solid: #d86459;
  --crit-tint: #2a1715;
  --info-text: #79b0d4;
  --info-solid: #5c97be;
  --info-tint: #15222c;
}

/* ── 역할별 accent 오버라이드 §6.2 ──
   역할별 페이지를 다른 제품처럼 보이게 하지 않는다.
   API role(learner/teacher/admin) → data-role 매핑은 유지하되, 기본 accent는 공통 세이지로 통일한다. */
[data-role="learner"] {
  --accent: #3e7a6e;
  --accent-deep: #316257;
  --accent-bright: #5f968b;
  --accent-tint: #eef4f2;
  --focus-ring: rgba(62, 122, 110, 0.45);
}
[data-role="instructor"] {
  --accent: #3e7a6e;
  --accent-deep: #316257;
  --accent-bright: #5f968b;
  --accent-tint: #eef4f2;
  --focus-ring: rgba(62, 122, 110, 0.45);
}
[data-role="admin"] {
  --accent: #3e7a6e;
  --accent-deep: #316257;
  --accent-bright: #5f968b;
  --accent-tint: #eef4f2;
  --focus-ring: rgba(62, 122, 110, 0.45);
}

/* 다크 + 역할 동시 적용 시 accent 명도 보정 (가독) */
[data-theme="dark"] body[data-role="learner"] {
  --accent: #6fb3a4;
  --accent-deep: #84c2b4;
  --accent-bright: #6fb3a4;
  --accent-tint: #1e2e2a;
  --focus-ring: rgba(111, 179, 164, 0.45);
}
[data-theme="dark"] body[data-role="instructor"],
[data-theme="dark"][data-role="instructor"] {
  --accent: #6fb3a4;
  --accent-deep: #84c2b4;
  --accent-bright: #6fb3a4;
  --accent-tint: #1e2e2a;
  --focus-ring: rgba(111, 179, 164, 0.45);
}
[data-theme="dark"] body[data-role="admin"],
[data-theme="dark"][data-role="admin"] {
  --accent: #6fb3a4;
  --accent-deep: #84c2b4;
  --accent-bright: #6fb3a4;
  --accent-tint: #1e2e2a;
  --focus-ring: rgba(111, 179, 164, 0.45);
}