/* 티오더 foundation 값을 한곳에 연결한 공통 변수. 화면 스타일은 원시 값을 직접 쓰지 않고 여기 변수만 쓴다.
   출처: color.md(global-color), typography.md, spacing.md, radius.md, elevation.md — px 기준, 루트 글자 크기는 100% 유지.
   색상군은 손님·직원이 함께 쓰는 서비스라 신규 제품 권장(손님 = red)을 따른 제안값이다. */
:root {
  /* 서체: KR 모드 Pretendard, 자간 -2% */
  --font-sans: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
  --tracking: -0.02em;
  --leading-snug: 1.3;
  --leading-normal: 1.5;

  /* 색: torder-chrome / white / red / 상태색(신규 제안: green/700, orange/700, red/600, blue/600) */
  --chrome-8: #fafafa;
  --chrome-10: #f5f5f5;
  --chrome-50: #eaeaea;
  --chrome-100: #c6c6c6;
  --chrome-400: #848484;
  --chrome-600: #4f4f4f;
  --chrome-700: #404040;
  --chrome-900: #181818;
  --white: #ffffff;
  --red-10: #fff2ee;
  --red-50: #ffe5de;
  --red-500: #e20000;
  --red-600: #af0000;
  --red-700: #900000;
  --yellow-400: #fac905;
  --yellow-600: #be8204;
  --green-700: #097146;
  --orange-700: #9a3412;
  --blue-600: #0a4cc2;

  /* 역할 */
  --bg: var(--chrome-8);
  --surface: var(--white);
  --text: var(--chrome-900);
  --text-muted: var(--chrome-600);
  --border: var(--chrome-100);
  --divider: var(--chrome-50);
  --input-border: var(--chrome-400);
  --primary: var(--red-500);
  --primary-hover: var(--red-600);
  --primary-text: var(--red-600);
  --primary-soft: var(--red-10);
  --focus: var(--chrome-700);
  --danger: var(--red-600);

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

  /* 반경(border-radius/round-N) */
  --round-4: 4px;
  --round-8: 8px;
  --round-12: 12px;
  --round-16: 16px;
  --round-full: 9999px;

  /* 그림자(shadow lv1·lv2: 색 t1=5%, t2=10%, t3=15%) / 가림막(scrim medium) */
  --shadow-lv1: 0 8px 16px 0 rgba(0, 0, 0, 0.05), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
  --shadow-lv2: 0 8px 32px 0 rgba(0, 0, 0, 0.05), 0 4px 12px 0 rgba(0, 0, 0, 0.15);
  --scrim-medium: rgba(0, 0, 0, 0.5);

  /* 글자 크기·조작 영역: 모바일 본문 16px, 제목 24px, 터치 최소 48px / PC 본문 14px, 최소 40px */
  --text-body: 16px;
  --text-caption: 14px;
  --text-small: 12px;
  --text-title: 24px;
  --text-card-title: 16px;
  --control-h: 48px;
  --gutter: var(--space-4);
}

@media (min-width: 768px) {
  :root {
    --text-body: 14px;
    --text-caption: 12px;
    --control-h: 40px;
    --gutter: var(--space-6);
  }
}