/*
 * 디자인 토큰 (docs/design/dashboard_ui.png 기준, 규칙은 CLAUDE.md "디자인 시스템")
 * 색상·radius·간격·글자 크기는 여기서만 정의하고, 다른 CSS 와 템플릿은 var(--…) 만 쓴다.
 */
:root {
  /* 바탕 / 표면 */
  --color-bg: #e7e6e1;            /* 웜 그레이 페이지 배경 */
  --color-surface: #ffffff;       /* 카드, 사이드바, 검색창 */
  --color-surface-muted: #f4f3ef; /* 카드 안 보조 영역, 입력칸 */
  --color-border: #ebeae5;        /* 꼭 필요할 때만 쓰는 옅은 구분선 */

  /* 글자 */
  --color-text: #1d1f1e;
  --color-text-muted: #7c807d;
  --color-text-subtle: #a7aaa7;
  --color-text-on-accent: #ffffff;

  /* 포인트 (세이지 그린) */
  --color-accent: #5c7a67;
  --color-accent-strong: #3f5a49;
  --color-accent-soft: #e3ebe5;
  --color-accent-gradient: linear-gradient(135deg, #7a9684 0%, #567463 100%);

  /* 사이드바 활성 아이콘 */
  --color-nav-active-bg: #1d1f1e;
  --color-nav-active-fg: #ffffff;
  --color-nav-fg: #4a4e4b;

  /* 상태 배지: 상승/정상 = 연녹색, 하락/오류 = 연빨강, 주의 = 연노랑, 중립 = 회색 */
  --color-up-bg: #e3efe5;
  --color-up-fg: #3c7a4d;
  --color-down-bg: #fbe4e2;
  --color-down-fg: #bf463d;
  --color-warn-bg: #f8eed6;
  --color-warn-fg: #96701b;
  --color-neutral-bg: #eeeeeb;
  --color-neutral-fg: #5f6360;
  --color-notify-dot: #e0473c;
  --color-focus-ring: #b9cbbf;     /* 입력칸 포커스 외곽선 */
  --color-overlay: rgba(29, 31, 30, 0.36); /* 모달 뒤 배경 */

  /* 차트 (dataviz 검증: 오늘 vs 비교 기간 = 강조 1색 + 회색, 정상 시각 ΔE 21.8 / 색각 ΔE 19.1.
     회색은 대비 2.6:1 이라 범례·선 끝 라벨·표 보기를 항상 함께 둔다) */
  --chart-accent: #3a7050;          /* 현재 기간·강조 계열 */
  --chart-context: #9da19d;         /* 비교 기간·지난 날 (덜 강조) */
  --chart-area: rgba(58, 112, 80, 0.10); /* 강조 계열 면 채움 (10%) */
  --chart-grid: #ebeae5;            /* 눈금선·축 (헤어라인) */
  --chart-track: #e3ebe5;           /* 미터의 빈 부분 (강조색의 밝은 단계) */

  /* 좌석 배치도 (static/js/pages/seats.js). 바닥 위에서 한눈에 구분되도록 이용 중은 진한 강조색으로 채운다 */
  --map-floor: var(--color-surface-muted);
  --map-room: var(--color-neutral-bg);
  --map-wall: var(--color-text);
  --map-window: #8db7d4;            /* 창문 (하늘색) */
  --map-pillar: var(--color-text-muted);
  --map-seat-empty: var(--color-surface);
  --map-seat-line: var(--color-text-subtle);
  --map-seat-in-use: var(--color-accent);
  --map-seat-reserved: var(--color-warn-bg);
  --map-seat-reserved-line: var(--color-warn-fg);

  /* 반경 */
  --radius-card: 20px;
  --radius-inner: 14px;
  --radius-control: 12px;
  --radius-pill: 999px;

  /* 간격 (4px 단위) */
  --space-half: 2px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  /* 레이아웃 */
  --sidebar-width: 64px;
  --nav-icon-size: 44px;
  --header-height: 72px;
  --control-height: 44px;
  --auth-card-width: 420px;
  --modal-width: 560px;
  --modal-width-wide: 760px;
  --tile-min-width: 76px;          /* 좌석·사물함 칸 */
  --tile-height: 64px;
  --grid-gap: var(--space-5);
  --content-max-width: 1440px;

  /* 그림자: 거의 없음 */
  --shadow-card: 0 1px 2px rgba(29, 31, 30, 0.03);
  --shadow-pop: 0 8px 24px rgba(29, 31, 30, 0.10);

  /* 글자 */
  --font-sans: "Pretendard", "Pretendard Variable", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
    "Malgun Gothic", "Segoe UI", sans-serif;
  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-md: 15px;
  --font-size-lg: 18px;
  --font-size-xl: 24px;
  --font-size-2xl: 30px;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --line-height: 1.5;

  /* 움직임 */
  --transition-fast: 120ms ease;
}