/* ═══════════════════════════════════════════════════════════════
   SmartPlace Design Tokens v1.0
   ─────────────────────────────────────────────────────────────
   Single source of truth for all visual design decisions.
   All UI components should reference these tokens.
   ═══════════════════════════════════════════════════════════════ */

:root {

  /* ── Color: Primary (Institutional Blue) ────────────────── */
  --sp-color-primary-50:  #EBF5FB;
  --sp-color-primary-100: #D1EAF7;
  --sp-color-primary-200: #A3D4EE;
  --sp-color-primary-300: #5AADE0;
  --sp-color-primary-400: #2991CC;
  --sp-color-primary-500: #1A6FA6;
  --sp-color-primary-600: #155A87;
  --sp-color-primary-700: #104568;
  --sp-color-primary-800: #0B3049;
  --sp-color-primary-900: #061B2A;

  /* ── Color: Neutral (Cool Gray) ─────────────────────────── */
  --sp-color-neutral-0:   #FFFFFF;
  --sp-color-neutral-50:  #F7F8FA;
  --sp-color-neutral-100: #EFF1F5;
  --sp-color-neutral-200: #DFE3EA;
  --sp-color-neutral-300: #C8CED8;
  --sp-color-neutral-400: #A0A8B8;
  --sp-color-neutral-500: #6B7588;
  --sp-color-neutral-600: #4A5468;
  --sp-color-neutral-700: #333D50;
  --sp-color-neutral-800: #1F2735;
  --sp-color-neutral-900: #111720;

  /* ── Color: Semantic ────────────────────────────────────── */
  --sp-color-success:       #1A8754;
  --sp-color-success-light: #D4EDDA;
  --sp-color-warning:       #C27A00;
  --sp-color-warning-light: #FFF3CD;
  --sp-color-error:         #C03030;
  --sp-color-error-light:   #FDE8E8;
  --sp-color-info:          #2A7FBF;
  --sp-color-info-light:    #E8F4FD;

  /* ── Typography ─────────────────────────────────────────── */
  --sp-font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --sp-text-display:  32px;
  --sp-text-h1:       24px;
  --sp-text-h2:       20px;
  --sp-text-h3:       17px;
  --sp-text-body-lg:  15px;
  --sp-text-body:     14px;
  --sp-text-caption:  13px;
  --sp-text-overline: 11px;

  --sp-weight-bold:     700;
  --sp-weight-semibold: 600;
  --sp-weight-medium:   500;
  --sp-weight-regular:  400;

  /* ── Spacing (4px base) ─────────────────────────────────── */
  --sp-space-1:  4px;
  --sp-space-2:  8px;
  --sp-space-3:  12px;
  --sp-space-4:  16px;
  --sp-space-5:  20px;
  --sp-space-6:  24px;
  --sp-space-8:  32px;
  --sp-space-10: 40px;
  --sp-space-12: 48px;
  --sp-space-16: 64px;

  /* ── Border Radius ──────────────────────────────────────── */
  --sp-radius-sm:   4px;
  --sp-radius-md:   8px;
  --sp-radius-lg:   14px;
  --sp-radius-full: 9999px;

  /* ── Elevation (Box Shadow) ─────────────────────────────── */
  --sp-shadow-1: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
  --sp-shadow-2: 0 4px 12px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
  --sp-shadow-3: 0 12px 40px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.08);

  /* ── Z-Index Scale ──────────────────────────────────────── */
  --sp-z-base:     0;
  --sp-z-sticky:   10;
  --sp-z-dropdown: 50;
  --sp-z-modal:    100;
  --sp-z-toast:    200;

  /* ── Motion / Transition ────────────────────────────────── */
  --sp-motion-fast:   120ms;
  --sp-motion-normal: 200ms;
  --sp-motion-slow:   350ms;
  --sp-ease-default:  ease-in-out;
  --sp-ease-out:      cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Interactive Element Sizing ─────────────────────────── */
  --sp-touch-target:  44px;
  --sp-btn-height-sm: 36px;
  --sp-btn-height-md: 44px;
  --sp-btn-height-lg: 52px;
  --sp-input-height:  44px;

  /* ── Focus Ring ─────────────────────────────────────────── */
  --sp-focus-ring: 0 0 0 3px var(--sp-color-primary-100);

  /* ── Vote 의미 토큰 (찬/반/기권/미투표/대기) ───────────────
     vote-result.css :root 와 정의 동일. 후속 라운드에서 vote-result.css :root
     정의 제거 시 design-tokens.css 가 SoT 가 됨. (plan v6 Phase A.2 / 백로그 Phase B SoT) */
  --vote-yes:       #043deb;  /* 찬성 */
  --vote-no:        #63f41e;  /* 반대 */
  --vote-abstain:   #ffb000;  /* 기권 */
  --vote-notvoted:  #7A8087;  /* 미투표 */
  --status-waiting: #aaaaaa;  /* 투표 대기 */

  /* ── Statistics Series (admin-statistics: 의미 채널 별칭)
     hero blue + teal + amber. 시멘틱 토큰을 alias 로 묶어 SoT 단일화 ─ */
  --sp-stat-conf:       var(--sp-color-primary-500);   /* 개설 — institutional blue #1A6FA6 */
  --sp-stat-part:       var(--sp-color-success);       /* 참여 — deep teal-green   #1A8754 */
  --sp-stat-acc:        var(--sp-color-warning);       /* 접속 — amber             #C27A00 */

  /* 차트 stroke ink — 시멘틱 토큰 그대로 (이미 채도 정제됨) */
  --sp-stat-conf-ink:   var(--sp-color-primary-500);
  --sp-stat-part-ink:   var(--sp-color-success);
  --sp-stat-acc-ink:    var(--sp-color-warning);

  /* ── Surface / Border / Text alias (다크 모드 단일 SoT)
     컴포넌트 룰은 이 alias 만 참조 → body.dark 가 alias 재정의로 일괄 전환.
     기존 --sp-color-* 토큰은 그대로 (디자인 시스템 변경 없음).            ─ */

  /* Surface */
  --sp-surface-page:        var(--sp-color-neutral-50);
  --sp-surface-card:        var(--sp-color-neutral-0);
  --sp-surface-card-alt:    var(--sp-color-neutral-50);     /* thead */
  --sp-surface-card-strong: var(--sp-color-neutral-100);    /* tfoot */
  --sp-surface-control:     var(--sp-color-neutral-100);    /* segmented track */
  --sp-surface-control-on:  var(--sp-color-neutral-0);      /* segmented active */

  /* Border */
  --sp-border-strong:       var(--sp-color-neutral-400);    /* tfoot top 2px */
  --sp-border-default:      var(--sp-color-neutral-200);    /* card */
  --sp-border-soft:         var(--sp-color-neutral-100);    /* row hairline */

  /* Text */
  --sp-text-strong:         var(--sp-color-neutral-900);
  --sp-text-default:        var(--sp-color-neutral-800);
  --sp-text-muted:          var(--sp-color-neutral-700);
  --sp-text-subtle:         var(--sp-color-neutral-500);
  --sp-text-disabled:       var(--sp-color-neutral-400);
  --sp-text-faint:          var(--sp-color-neutral-300);     /* separator / loading-state */

  /* Border hover variant */
  --sp-border-hover:        var(--sp-color-neutral-300);

  /* Delta up — admin-statistics 한정 (글로벌 success 토큰 미손상) */
  --sp-delta-up-color:      var(--sp-color-success);
}

/* ═══════════════════════════════════════════════════════════════
   Dark mode — alias 토큰 재정의 (단일 SoT)
   ─────────────────────────────────────────────────────────────
   컴포넌트는 이 블록을 인지하지 않음. alias 만 참조.
   ═══════════════════════════════════════════════════════════════ */
body.dark {
  --sp-surface-page:        #111315;
  --sp-surface-card:        #1A1D1F;
  --sp-surface-card-alt:    #1F2226;
  --sp-surface-card-strong: #22262b;
  --sp-surface-control:     #22262b;
  --sp-surface-control-on:  #2C3036;

  --sp-border-strong:       #4A5468;
  --sp-border-default:      #2A2E33;
  --sp-border-soft:         #22262b;

  --sp-text-strong:         #FFFFFF;
  --sp-text-default:        #E8ECF1;
  --sp-text-muted:          #C8CED8;
  --sp-text-subtle:         #A0A8B8;
  --sp-text-disabled:       #6B7588;
  --sp-text-faint:          #4A5468;

  --sp-border-hover:        #33383F;

  --sp-delta-up-color:      #43C97B;
}

/* ═══════════════════════════════════════════════════════════════
   Standard Components
   ═══════════════════════════════════════════════════════════════ */

/* ── Empty State ──────────────────────────────────────────── */
.sp-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--sp-space-12, 48px) var(--sp-space-5, 20px);
  text-align: center;
}

.sp-empty__icon {
  width: 48px;
  height: 48px;
  margin-bottom: var(--sp-space-4, 16px);
  color: var(--sp-color-neutral-300, #C8CED8);
}

.sp-empty__icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sp-empty__title {
  font-size: var(--sp-text-body-lg, 15px);
  font-weight: var(--sp-weight-medium, 500);
  color: var(--sp-color-neutral-600, #4A5468);
  margin-bottom: var(--sp-space-1, 4px);
  line-height: 1.5;
}

.sp-empty__desc {
  font-size: var(--sp-text-caption, 13px);
  color: var(--sp-color-neutral-400, #A0A8B8);
  line-height: 1.6;
}

.sp-empty__action {
  margin-top: var(--sp-space-5, 20px);
}

body.dark .sp-empty__icon {
  color: var(--sp-color-neutral-600, #4A5468);
}

body.dark .sp-empty__title {
  color: var(--sp-color-neutral-300, #C8CED8);
}

body.dark .sp-empty__desc {
  color: var(--sp-color-neutral-500, #6B7588);
}