/*
  디자인 토큰 — 앱(meepletown-app/lib/constants/*.dart)과 1:1.
  값이 바뀌면 여기만 고친다. 화면 CSS에 색/크기 리터럴을 직접 쓰지 않는다.
*/
:root {
  /* colors.dart — Gray */
  --gray-0: #FFFFFF;
  --gray-50: #F6F6F6;
  --gray-100: #E8E8E8;
  --gray-200: #D0D0D0;
  --gray-300: #B9B9B9;
  --gray-400: #A1A1A1;
  --gray-500: #8A8A8A;
  --gray-600: #717272;
  --gray-700: #5A5B5B;
  --gray-800: #424343;
  --gray-900: #2B2C2C;
  --gray-950: #121314;

  /* colors.dart — Orange (primary) */
  --orange-50: #FEF1EC;
  --orange-100: #FFDFD3;
  --orange-300: #FE7D4C;
  --orange-500: #F14C11;
  --orange-700: #C43605;
  --primary: var(--orange-500);
  --primary-pressed: var(--orange-700);
  --primary-tint: var(--orange-50);

  /* colors.dart — System / Sub */
  --success: #A5CE00;
  --success-tint: #EDF8CF;
  --error: #EE0E37;
  --error-tint: #FDE7EB;
  --info: #4EB4E0;
  --info-tint: #E6F5FB;
  --yellow: #FFB347;
  --yellow-tint: #FFF3E2;
  --level-gold: #EF9F27;
  --level-silver: #A3A8B4;
  --level-bronze: #BB502C;

  /* 대시보드 차트 계열색(2026-10-02) — 예전엔 dashboard.js에 리터럴로 박혀 있었다. 앱 토큰에 없는 어드민 전용 */
  --chart-users: var(--primary);
  --chart-listings: #2563EB;
  --chart-trade: #0891B2;
  --chart-sold: #16A34A;
  --chart-community: #9333EA;
  --chart-on: var(--gray-0);
  --delta-up: #16A34A;
  --delta-down: var(--error);

  /* 역할별 별칭 */
  --bg: var(--gray-50);
  --surface: var(--gray-0);
  --surface-2: var(--gray-50);
  --border: var(--gray-100);
  --border-strong: var(--gray-200);
  --text: var(--gray-900);
  --text-2: var(--gray-700);
  --text-muted: var(--gray-500);
  --text-disabled: var(--gray-300);

  /* radius.dart */
  --radius-sm: 6px;
  --radius-xs: 8px;
  --radius-md: 12px;
  --radius-card: 16px;
  --radius-lg: 20px;
  --radius-xl: 32px;
  --radius-full: 9999px;

  /* spacing.dart */
  --s-4: 4px;
  --s-8: 8px;
  --s-12: 12px;
  --s-16: 16px;
  --s-24: 24px;
  --s-32: 32px;

  /* typography.dart — Pretendard */
  --font: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Segoe UI', sans-serif;
  --font-mono: 'SF Mono', Menlo, Consolas, monospace;

  /* 그림자 (앱 카드 톤에 맞춘 얕은 그림자) */
  --shadow-card: 0 1px 2px rgba(18, 19, 20, 0.04), 0 4px 12px rgba(18, 19, 20, 0.04);
  --shadow-drawer: -8px 0 32px rgba(18, 19, 20, 0.12);
  --shadow-pop: 0 8px 24px rgba(18, 19, 20, 0.14);

  /* 레이아웃 */
  --sidebar-w: 232px;
  --topbar-h: 60px;
  --content-max: 1280px;
}

/* typography.dart 스케일 — 클래스로 사용 */
.display-d1 { font-size: 28px; font-weight: 800; line-height: 1.4; letter-spacing: 0; }
.display-d2 { font-size: 24px; font-weight: 800; line-height: 1.4; letter-spacing: -0.24px; }
.head-h1 { font-size: 20px; font-weight: 700; line-height: 1.4; letter-spacing: -0.2px; }
.head-h2 { font-size: 18px; font-weight: 700; line-height: 1.4; letter-spacing: -0.18px; }
.head-h3 { font-size: 16px; font-weight: 700; line-height: 1.4; letter-spacing: -0.16px; }
.body-b1-bold { font-size: 15px; font-weight: 700; line-height: 1.5; letter-spacing: -0.3px; }
.body-b1-medium { font-size: 15px; font-weight: 500; line-height: 1.5; letter-spacing: -0.3px; }
.body-b1 { font-size: 15px; font-weight: 400; line-height: 1.5; letter-spacing: -0.3px; }
.body-b2-medium { font-size: 14px; font-weight: 500; line-height: 1.5; letter-spacing: -0.28px; }
.body-b2 { font-size: 14px; font-weight: 400; line-height: 1.5; letter-spacing: -0.28px; }
.caption-c1-semibold { font-size: 12px; font-weight: 600; line-height: 1.4; letter-spacing: -0.24px; }
.caption-c1 { font-size: 12px; font-weight: 400; line-height: 1.4; letter-spacing: -0.24px; }
.caption-c2-semibold { font-size: 11px; font-weight: 600; line-height: 1.4; letter-spacing: -0.22px; }
.caption-c2 { font-size: 11px; font-weight: 400; line-height: 1.4; letter-spacing: -0.22px; }
.muted { color: var(--text-muted); }
.mono { font-family: var(--font-mono); font-size: 12px; }