/* ==========================================================================
   RANGi 로비 — 디자인 토큰
   승인된 데스크톱 시안(drafts/lobby-desktop.png)의 톤: 아이보리·화이트·무채색
   파스텔(채도 낮게, 밝고 차분하게). 색·서체·간격은 여기서만 정의한다.
   ========================================================================== */
@font-face {
  font-family: "Pretendard";
  src: url("./fonts/PretendardVariable.woff2") format("woff2");
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
}

:root {
  /* 행동의 단일 주색 — 미설정과 기본 프리셋은 terracotta */
  --accent: #a95627;
  --accent-hover: #8f4522;
  --accent-ink: #fffaf4;
  --focus: #a95627;
  --accent-soft: color-mix(in srgb, var(--accent) 18%, transparent);
  --accent-soft-strong: color-mix(in srgb, var(--accent) 28%, transparent);

  /* 배경 — 따뜻한 아이보리 바탕 + 저대비 건축 도면선 */
  --bg-a: #f7f3ea;
  --bg-b: #eef1ec;
  --bg: linear-gradient(160deg, var(--bg-a) 0%, var(--bg-b)55%, #f3ecec 100%);
  --blueprint-line: rgba(103, 126, 120, 0.075);
  --blueprint-line-strong: rgba(116, 133, 123, 0.105);
  --blueprint-glow: rgba(216, 151, 83, 0.11);

  /* 글래스모피즘 — 카드는 반투명 유리, 뒤 배경이 비쳐 보인다 */
  --glass: rgba(255, 255, 255, 0.6);
  --glass-strong: rgba(255, 255, 255, 0.78);
  --glass-border: rgba(255, 255, 255, 0.82);
  --glass-shadow:
    0 1px 0 rgba(255, 255, 255, 0.88) inset,
    0 18px 44px rgba(104, 86, 62, 0.11),
    0 3px 12px rgba(104, 86, 62, 0.07);
  --glass-blur: 22px;

  /* 텍스트 (따뜻한 무채색) */
  --text-primary: #3c372f;
  --text-secondary: #756d5f;
  --text-muted: #a29a8b;

  /* 표면(글래스 위 보조 표면) */
  --surface-alt: rgba(255, 255, 255, 0.46);
  --border: rgba(130, 116, 94, 0.15);
  --border-strong: rgba(130, 116, 94, 0.27);

  /* 파스텔 강조색 — 부서·상태 구분용 (채도 낮은 사탕색 순환) */
  --hue-1: #9fc2ab;      /* 민트 */
  --hue-1-ink: #4c7a5e;
  --hue-1-soft: rgba(159, 194, 171, 0.28);
  --hue-2: #e3b9a3;      /* 복숭아 */
  --hue-2-ink: #9c5f45;
  --hue-2-soft: rgba(227, 185, 163, 0.3);
  --hue-3: #bdb2d9;      /* 라벤더 */
  --hue-3-ink: #665792;
  --hue-3-soft: rgba(189, 178, 217, 0.3);
  --hue-4: #b9cbdb;      /* 하늘 */
  --hue-4-ink: #3f6e8c;
  --hue-4-soft: rgba(185, 203, 219, 0.3);
  --hue-5: #ddcf9c;      /* 버터 */
  --hue-5-ink: #8a7326;
  --hue-5-soft: rgba(221, 207, 156, 0.32);

  /* 신호색 (완료/진행/실패) — 지금 의미 유지, 파스텔로 순화 */
  --green: #6fa980;
  --green-soft: rgba(111, 169, 128, 0.18);
  --amber: var(--accent);
  --amber-soft: var(--accent-soft);
  --amber-deep: var(--accent);
  --amber-bright: var(--accent);
  --red: #cf7d78;
  --red-soft: rgba(207, 125, 120, 0.2);
  --muted-dot: #b9b0a0;
  --muted-soft: rgba(185, 176, 160, 0.22);

  /* 미니룸(사무실 파노라마) 배경 — 원목 바닥 + 창빛 */
  --wood-light: #ecdfc4;
  --wood-shade: #d8c5a0;
  --window-glow: rgba(255, 255, 255, 0.65);

  /* 고정시점 CCTV 사무실 장면 — 뒷벽·바닥·인물·집기 톤 (기존 파스텔 팔레트 연장) */
  --wall-wood: #cdb488;
  --wall-wood-dark: #b89b6d;
  --wall-shelf: #a9895f;
  --floor-line: rgba(120, 92, 55, 0.16);
  --baseboard: rgba(90, 68, 38, 0.3);
  --chair: #9c8b76;
  --chair-dark: #7d6e5c;
  --skin: #e8c8a3;
  --hair: #5b4938;
  --paper: #fdfbf3;
  --paper-line: rgba(120, 100, 75, 0.4);
  --monitor-bezel: #3a362f;
  --monitor-off: #57534a;
  --monitor-glow-work: #f0b35c;
  --monitor-glow-idle: #cddce6;

  /* 서체 */
  --font-body: "Pretendard", -apple-system, system-ui, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* 레이아웃 프레임 */
  --frame-gap: 22px;
  --frame-pad: 32px;
  --frame-width: 1240px;
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;
}

/* RANGi가 쓰는 하나의 다크 표면. 사용자 색 테마는 두지 않는다. */
:root[data-theme="dark"] { --accent: #c46b39; --accent-hover: #d47b49; --accent-ink: #fffaf4; --focus: #e8a554; }