/* ──────────────────────────────────────────────────────────────────────────
 * tokens.css — 디자인 토큰(색 팔레트 + 간격/반경/타이포).
 *
 * 통합 프론트의 단일 소스. SPA 와 어드민 페이지가 **같은 이 파일**을 링크해
 * 색·간격을 공유한다(검토에서 지적된 "스타일 시스템 2개" 를 여기로 수렴시킨다).
 * three.js 씬도 getComputedStyle 로 이 변수들을 읽어 3D 색을 맞춘다.
 * ────────────────────────────────────────────────────────────────────────── */
:root {
  color-scheme: dark;

  /* ── 색: 배경/표면 ───────────────────────────── */
  --jl-bg:          #0a0a0f;
  --jl-bg-2:        #0e0e16;
  --jl-surface:     #14141d;
  --jl-surface-2:   #1b1b27;
  --jl-border:      rgba(255, 255, 255, 0.09);
  --jl-border-str:  rgba(255, 255, 255, 0.16);

  /* ── 색: 텍스트 ──────────────────────────────── */
  --jl-text:        #e9e9f2;
  --jl-text-muted:  #9a9ab2;
  --jl-text-faint:  #63637a;

  /* ── 색: 강조/상태 ───────────────────────────── */
  --jl-accent:      #8b8cf0;   /* 인디고 — 주 강조 */
  --jl-accent-soft: rgba(139, 140, 240, 0.16);
  --jl-on-accent:   #0a0a10;   /* accent 위 텍스트(버튼) */
  --jl-ok:          #5eead4;   /* 틸 — 완료 */
  --jl-active:      #8b8cf0;   /* 인디고 — 진행 중 */
  --jl-idle:        #f0a35e;   /* 앰버 — 자리 비움 / 예정 */
  --jl-danger:      #f06e6e;

  /* ── 3D 씬 전용(팔레트에서 파생) ───────────────── */
  --jl-scene-floor: #1b1b27;
  --jl-scene-desk:  #c88f5a;   /* 나무 책상 */
  --jl-scene-skin:  #e8b48c;
  --jl-scene-hair:  #2b2b33;
  --jl-scene-shirt: #8b8cf0;
  --jl-scene-lamp:  #f0c15e;

  /* ── 반경 ────────────────────────────────────── */
  --jl-r-sm: 8px;
  --jl-r-md: 12px;
  --jl-r-lg: 18px;
  --jl-r-pill: 999px;

  /* ── 간격 스케일 ─────────────────────────────── */
  --jl-s-1: 4px;
  --jl-s-2: 8px;
  --jl-s-3: 12px;
  --jl-s-4: 16px;
  --jl-s-5: 24px;
  --jl-s-6: 32px;
  --jl-s-7: 48px;

  /* ── 그림자/링 ───────────────────────────────── */
  --jl-shadow:   0 10px 40px rgba(0, 0, 0, 0.45);
  --jl-shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.35);
  --jl-ring:     0 0 0 1px var(--jl-border);

  /* ── 타이포 ──────────────────────────────────── */
  --jl-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --jl-font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, monospace;

  /* ── 레이아웃 ────────────────────────────────── */
  --jl-maxw: 1120px;
  --jl-chat-h: 320px;
}

/* ──────────────────────────────────────────────────────────────────────────
 * 라이트 모드 토큰.
 *   - 시스템이 라이트이고 강제 다크가 아닐 때(= system 모드) 적용
 *   - 또는 사용자가 라이트를 강제(data-theme="light")했을 때 적용
 * (강제 다크는 data-theme="dark" → 미디어 블록이 제외되어 위 :root 다크값 유지)
 * ────────────────────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) {
    color-scheme: light;
    --jl-bg:          #f6f6f4;
    --jl-bg-2:        #ececef;
    --jl-surface:     #ffffff;
    --jl-surface-2:   #f1f1f5;
    --jl-border:      rgba(20, 20, 45, 0.10);
    --jl-border-str:  rgba(20, 20, 45, 0.20);
    --jl-text:        #1b1b24;
    --jl-text-muted:  #55556a;
    --jl-text-faint:  #9292a4;
    --jl-accent:      #5a5ce0;
    --jl-accent-soft: rgba(90, 92, 224, 0.12);
    --jl-on-accent:   #ffffff;
    --jl-ok:          #0e9c88;
    --jl-active:      #5a5ce0;
    --jl-idle:        #d6820a;
    --jl-danger:      #d64141;
    --jl-scene-floor: #e3e3ea;
    --jl-shadow:      0 10px 40px rgba(20, 20, 45, 0.12);
    --jl-shadow-sm:   0 4px 16px rgba(20, 20, 45, 0.10);
  }
}
:root[data-theme='light'] {
  color-scheme: light;
  --jl-bg:          #f6f6f4;
  --jl-bg-2:        #ececef;
  --jl-surface:     #ffffff;
  --jl-surface-2:   #f1f1f5;
  --jl-border:      rgba(20, 20, 45, 0.10);
  --jl-border-str:  rgba(20, 20, 45, 0.20);
  --jl-text:        #1b1b24;
  --jl-text-muted:  #55556a;
  --jl-text-faint:  #9292a4;
  --jl-accent:      #5a5ce0;
  --jl-accent-soft: rgba(90, 92, 224, 0.12);
  --jl-on-accent:   #ffffff;
  --jl-ok:          #0e9c88;
  --jl-active:      #5a5ce0;
  --jl-idle:        #d6820a;
  --jl-danger:      #d64141;
  --jl-scene-floor: #e3e3ea;
  --jl-shadow:      0 10px 40px rgba(20, 20, 45, 0.12);
  --jl-shadow-sm:   0 4px 16px rgba(20, 20, 45, 0.10);
}

/* ──────────────────────────────────────────────────────────────────────────
 * 글래스모피즘 + 뉴모피즘 블렌드 토큰 (연락처 버튼 등).
 *   glass : 반투명 bg + 가장자리 하이라이트 + inner 하이라이트
 *   neu   : 이중 소프트 섀도우(어두움 ↘ / 밝음 ↖)
 * 다크가 기본, 아래에서 라이트로 덮어쓴다(새 속성이라 기존 블록과 충돌 없음).
 * ────────────────────────────────────────────────────────────────────────── */
:root {
  --jl-glass-bg:     rgba(30, 30, 44, 0.55);
  --jl-glass-border: rgba(255, 255, 255, 0.14);
  --jl-glass-inset:  rgba(255, 255, 255, 0.10);
  --jl-neu-dark:     rgba(0, 0, 0, 0.55);
  --jl-neu-light:    rgba(255, 255, 255, 0.05);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) {
    --jl-glass-bg:     rgba(255, 255, 255, 0.5);
    --jl-glass-border: rgba(255, 255, 255, 0.75);
    --jl-glass-inset:  rgba(255, 255, 255, 0.7);
    --jl-neu-dark:     rgba(20, 20, 45, 0.16);
    --jl-neu-light:    rgba(255, 255, 255, 0.95);
  }
}
:root[data-theme='light'] {
  --jl-glass-bg:     rgba(255, 255, 255, 0.5);
  --jl-glass-border: rgba(255, 255, 255, 0.75);
  --jl-glass-inset:  rgba(255, 255, 255, 0.7);
  --jl-neu-dark:     rgba(20, 20, 45, 0.16);
  --jl-neu-light:    rgba(255, 255, 255, 0.95);
}