/* ──────────────────────────────────────────────────────────────
 * SPUM Studio — Depth System Tokens
 *
 * "바깥은 어둡고, 안쪽 작업 영역은 선명하게."
 * 명도 5단계로 시각적 깊이(focal hierarchy)를 만든다.
 *
 *   Depth 1  앱 전체 프레임 (Top Bar / Footer / Shell)
 *   Depth 2  주요 구역 (Global Nav / Cast List / AI Assistant)
 *   Depth 3  실제 작업 공간 (Preview / Appearance Editor)
 *   Depth 4  기능 패널 (Canvas / Part Grid / Controls)
 *   Depth 5  직접 조작 요소 (Button / Chip / Card / Input)
 *
 * AI Assistant 컬럼은 별도 색온도(인디고/퍼플)를 사용해
 * "사람의 작업 영역"과 "AI의 공간"을 분리한다.
 * ────────────────────────────────────────────────────────────── */

:root {
  /* ── 5-step neutral dark ramp (visually distinct stops) ── */
  --ui-depth-1-bg: #0f1016;   /* shell / topbar / footer */
  --ui-depth-2-bg: #0f1016;   /* left-nav / cast-list outer */
  --ui-depth-3-bg: #181c24;   /* work surface (preview / appearance) */
  --ui-depth-4-bg: #222830;   /* panel body */
  --ui-depth-5-bg: #2c3240;   /* panel-strong / control hover / floating */

  --ui-shell-bg: var(--ui-depth-1-bg);
  --ui-topbar-bg: var(--ui-depth-1-bg);
  --ui-footer-bg: var(--ui-depth-1-bg);
  --ui-left-nav-bg: var(--ui-depth-2-bg);
  --ui-left-nav-panel-bg: var(--ui-depth-4-bg);
  --ui-cast-list-bg: #181a21;
  --ui-cast-list-panel-bg: var(--ui-depth-4-bg);
  --ui-cast-list-input-bg: #0e0f14;
  --ui-preview-bg: var(--ui-depth-3-bg);
  --ui-appearance-bg: var(--ui-depth-3-bg);
  --ui-appearance-border: rgba(76, 145, 237, 0.32);
  --ui-panel-bg: var(--ui-depth-4-bg);
  --ui-panel-bg-strong: var(--ui-depth-5-bg);
  --ui-panel-border: rgba(180, 184, 200, 0.10);
  --ui-panel-border-strong: rgba(76, 145, 237, 0.36);

  --ui-border-weak: rgba(180, 184, 200, 0.06);
  --ui-border-mid: rgba(180, 184, 200, 0.10);
  --ui-border-strong: rgba(76, 145, 237, 0.42);

  /* ── Control surface tokens (buttons, inputs, interactive elements) ── */
  --ui-control-bg: rgba(255, 255, 255, 0.04);
  --ui-control-bg-hover: rgba(255, 255, 255, 0.08);
  --ui-control-border-hover: rgba(180, 184, 200, 0.18);

  --ui-accent: #4c91ed;
  --ui-accent-hover: #6da8f5;
  --ui-accent-active: #3a7ad8;
  --ui-accent-quiet: rgba(76, 145, 237, 0.06);
  --ui-accent-bg: rgba(76, 145, 237, 0.18);
  --ui-accent-border: rgba(76, 145, 237, 0.72);
  --ui-focus-ring: 0 0 0 2px rgba(76, 145, 237, 0.42);
  --ui-selected-tint: rgba(76, 145, 237, 0.14);
  --ui-inset-bg: rgba(0, 0, 0, 0.32);
  --ui-input-bg: #0e0f14;

  --ui-text-primary: #f5f5f7;
  --ui-text-secondary: #b8b8bf;
  --ui-text-muted: #6c6c75;
  --ui-text-faint: #45454d;

  --ui-success: #2ED3A2;
  --ui-warning: #F4B95F;
  --ui-danger: #FF5C6C;

  --ai-depth-2-bg: #0f1016;
  --ai-depth-3-bg: #181c24;
  --ai-depth-4-bg: #222830;
  --ai-depth-5-bg: #2c3240;
  --ai-assistant-bg: #0f1016;
  --ai-assistant-border: var(--ui-border-mid);
  --ai-panel-bg: #222830;
  --ai-panel-border: var(--ui-border-weak);

  --ai-accent: #7c8aff;
  --ai-accent-hover: #99a4ff;
  --ai-accent-active: #5f6de6;
  --ai-accent-quiet: rgba(124, 138, 255, 0.06);
  --ai-accent-bg: rgba(124, 138, 255, 0.14);
  --ai-accent-border: rgba(124, 138, 255, 0.52);
  --ai-focus-ring: 0 0 0 2px rgba(124, 138, 255, 0.36);

  --ui-panel-highlight: var(--spum-shadow-inset-top);
  --ui-panel-shadow: var(--spum-shadow-elevated);
  --ui-control-inset: var(--spum-shadow-inset-top), var(--spum-shadow-inset-bottom);
  --ui-control-active-inset: var(--spum-shadow-inset-pressed);

  /* ── Cast page semantic tokens ── */
  --ui-cast-workspace-bg: #13151b;
  --ui-cast-slots-bg: #090a0f;
  --ui-cast-grid-bg: #0d0e13;
  --ui-cast-panel-bg: #1a1c23;
  --ui-cast-card-bg: #16181d;
  --ui-cast-popup-bg: #1e2028;
  --ui-cast-deep-bg: #0a0c12;
  --ui-cast-chip-bg: #1a1e26;
  --ui-cast-avatar-bg: #1a1d24;
  --ui-cast-items-bg: #22242b;
  --ui-cast-accent: #4c91ed;
  --ui-cast-accent-soft: rgba(76, 145, 237, 0.12);
  --ui-cast-mint: #8ef0b4;
  --ui-cast-mint-hover: #b0ffd0;
  --ui-cast-mint-soft: rgba(142, 240, 180, 0.10);
  --ui-cast-tag-accent: #8eb4ff;
  --ui-cast-tag-hover: #b0d0ff;
  --ui-cast-lock: #f0c04b;
  --ui-cast-lock-active: #f0a04b;

  /* Cast shared alpha values */
  --ui-cast-border: rgba(255, 255, 255, 0.06);
  --ui-cast-border-subtle: rgba(255, 255, 255, 0.04);
  --ui-cast-border-mid: rgba(255, 255, 255, 0.08);
  --ui-cast-border-visible: rgba(255, 255, 255, 0.12);
  --ui-cast-hover-bg: rgba(255, 255, 255, 0.04);
  --ui-cast-hover-bg-strong: rgba(255, 255, 255, 0.08);
  --ui-cast-control-bg: rgba(255, 255, 255, 0.04);
  --ui-cast-control-bg-hover: rgba(255, 255, 255, 0.08);
  --ui-cast-overlay: rgba(0, 0, 0, 0.5);

  /* ── Map page semantic tokens ── */
  --ui-map-surface: rgba(0, 0, 0, 0.22);
  --ui-map-dock-bg: #0f1016;
  --ui-map-hover: rgba(255, 255, 255, 0.04);
  --ui-map-selected: rgba(76, 145, 237, 0.12);
  --ui-map-border: rgba(255, 255, 255, 0.06);
  --ui-map-border-mid: rgba(255, 255, 255, 0.10);
  --ui-map-border-strong: rgba(76, 145, 237, 0.36);
  --ui-map-panel-bg: #181a21;
  --ui-map-toolbar-bg: #16181f;
  --ui-map-control-bg: rgba(255, 255, 255, 0.04);
  --ui-map-control-hover: rgba(255, 255, 255, 0.08);

  --ui-canvas-bg: #08080c;
  --ui-canvas-grid-minor: rgba(180, 184, 200, 0.04);
  --ui-canvas-grid-major: rgba(180, 184, 200, 0.07);
  --ui-canvas-cross: rgba(76, 145, 237, 0.18);
  /* 8px minor / 64px major graph paper, no gradient */
  --ui-canvas-grid-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64'><g shape-rendering='crispEdges'><path d='M0 8H64M0 16H64M0 24H64M0 32H64M0 40H64M0 48H64M0 56H64M8 0V64M16 0V64M24 0V64M32 0V64M40 0V64M48 0V64M56 0V64' stroke='rgba(180,184,200,0.04)' stroke-width='1'/><path d='M0 0H64M0 0V64' stroke='rgba(180,184,200,0.07)' stroke-width='1'/></g></svg>");

  /* ── Legacy SPUM token bridge (기존 기능 CSS도 같은 팔레트로 보이게 함) ── */
  /* --spum-bg-0..4 live in packages/spum-ui/styles/tokens.css. */
  --spum-text: var(--ui-text-primary);
  --spum-text-secondary: var(--ui-text-secondary);
  --spum-text-muted: var(--ui-text-muted);
  --spum-text-faint: var(--ui-text-faint);
  --spum-accent: var(--ui-accent);
  --spum-accent-soft: var(--ui-accent-bg);
  --spum-accent-border: rgba(76, 145, 237, 0.46);
  --spum-border: var(--ui-border-weak);
  --spum-border-mid: var(--ui-border-mid);
  --spum-border-strong: var(--ui-border-strong);

  /* ── 과도기 호환 alias: shell.css 정리 전까지 유지 ── */
  --ui-depth-1-border: rgba(143, 184, 255, 0.06);
  --ui-depth-2-border: var(--ui-border-weak);
  --ui-depth-3-border: rgba(143, 184, 255, 0.12);
  --ui-depth-4-border: var(--ui-border-mid);
  --ui-depth-5-border: var(--ui-border-strong);

  --ai-depth-2-border: rgba(155, 108, 255, 0.12);
  --ai-depth-3-border: rgba(155, 108, 255, 0.18);
  --ai-depth-4-border: rgba(155, 108, 255, 0.24);
  --ai-depth-5-border: var(--ai-accent-border);

  --ui-text-strong: var(--ui-text-primary);
  --ui-text: var(--ui-text-secondary);
  --ui-text-faint: var(--ui-text-faint);
}