/* MUSTGO BTMS — design tokens (base)
   Material 3 토큰 이름 체계를 따른다. 색상 기본값은 M3 baseline light scheme이며
   site별 브랜드 색은 palette-{traveler,manager,agency}.css에서 오버라이드한다.
   참조: _workspace/07_system_architecture.md 6.2 (ADR-013/014)

   로드 순서: fonts.css -> tokens.css -> palette-{site}.css -> components.css -> {site}-layout.css */

:root {
  /* Primary */
  --md-sys-color-primary: #6750a4;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #eaddff;
  --md-sys-color-on-primary-container: #4f378a;
  --md-sys-color-inverse-primary: #d0bcff;

  /* Secondary */
  --md-sys-color-secondary: #625b71;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #e8def8;
  --md-sys-color-on-secondary-container: #4a4459;

  /* Tertiary */
  --md-sys-color-tertiary: #7d5260;
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-tertiary-container: #ffd8e4;
  --md-sys-color-on-tertiary-container: #633b48;

  /* Error */
  --md-sys-color-error: #b3261e;
  --md-sys-color-on-error: #ffffff;
  --md-sys-color-error-container: #f9dedc;
  --md-sys-color-on-error-container: #852221;

  /* Surfaces & background */
  --md-sys-color-background: #fef7ff;
  --md-sys-color-on-background: #1d1b20;
  --md-sys-color-surface: #fef7ff;
  --md-sys-color-on-surface: #1d1b20;
  --md-sys-color-surface-variant: #e7e0ec;
  --md-sys-color-on-surface-variant: #49454f;
  --md-sys-color-surface-tint: #6750a4;
  --md-sys-color-inverse-surface: #322f35;
  --md-sys-color-inverse-on-surface: #f5eff7;

  /* Surface containers (tonal elevation) */
  --md-sys-color-surface-dim: #ded8e1;
  --md-sys-color-surface-bright: #fef7ff;
  --md-sys-color-surface-container-lowest: #ffffff;
  --md-sys-color-surface-container-low: #f7f2fa;
  --md-sys-color-surface-container: #f3edf7;
  --md-sys-color-surface-container-high: #ece6f0;
  --md-sys-color-surface-container-highest: #e6e0e9;

  /* Outline & utility */
  --md-sys-color-outline: #79747e;
  --md-sys-color-outline-variant: #cac4d0;
  --md-sys-color-scrim: #000000;
  --md-sys-color-shadow: #000000;

  /* Fixed accent pairs — 프로토타입 M3 kit 의 :root 에 있으나 빠져 있던 12개. palette-traveler 가 primary-fixed-dim 을 덮어쓴다. */
  --md-sys-color-primary-fixed: #eaddff;
  --md-sys-color-primary-fixed-dim: #d0bcff;
  --md-sys-color-on-primary-fixed: #21005d;
  --md-sys-color-on-primary-fixed-variant: #4f378b;
  --md-sys-color-secondary-fixed: #e8def8;
  --md-sys-color-secondary-fixed-dim: #ccc2dc;
  --md-sys-color-on-secondary-fixed: #1d192b;
  --md-sys-color-on-secondary-fixed-variant: #4a4458;
  --md-sys-color-tertiary-fixed: #ffd8e4;
  --md-sys-color-tertiary-fixed-dim: #efb8c8;
  --md-sys-color-on-tertiary-fixed: #31111d;
  --md-sys-color-on-tertiary-fixed-variant: #633b48;

  /* Elevation — M3 umbra/penumbra shadow pairs */
  --md-sys-elevation-level0: none;
  --md-sys-elevation-level1: 0px 1px 2px 0px rgba(0, 0, 0, 0.30), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
  --md-sys-elevation-level2: 0px 1px 2px 0px rgba(0, 0, 0, 0.30), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
  --md-sys-elevation-level3: 0px 1px 3px 0px rgba(0, 0, 0, 0.30), 0px 4px 8px 3px rgba(0, 0, 0, 0.15);
  --md-sys-elevation-level4: 0px 2px 3px 0px rgba(0, 0, 0, 0.30), 0px 6px 10px 4px rgba(0, 0, 0, 0.15);
  --md-sys-elevation-level5: 0px 4px 4px 0px rgba(0, 0, 0, 0.30), 0px 8px 12px 6px rgba(0, 0, 0, 0.15);

  /* Shape — M3 corner scale (프로토타입 kit 값 그대로) */
  --md-sys-shape-corner-none: 0px;
  --md-sys-shape-corner-extra-small: 4px;
  --md-sys-shape-corner-small: 8px;
  --md-sys-shape-corner-medium: 12px;
  --md-sys-shape-corner-large: 16px;
  --md-sys-shape-corner-extra-large: 28px;
  --md-sys-shape-corner-full: 9999px;

  /* State layer opacities / motion — 공용 컴포넌트(ui.js)가 쓴다 */
  --md-sys-state-hover-opacity: 0.08;
  --md-sys-state-focus-opacity: 0.10;
  --md-sys-state-pressed-opacity: 0.10;
  --md-sys-state-disabled-content-opacity: 0.38;
  --md-sys-state-disabled-container-opacity: 0.12;
  --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
  --md-sys-motion-duration-short: 100ms;
  --md-sys-motion-duration-medium: 250ms;
  --md-sys-motion-duration-long: 400ms;

  /* BTMS 확장 — M3에 대응 슬롯이 없는 값만 정의한다.
     success는 예약 승인/정상 상태 표시에 쓰이며 M3 color role에 없다. */
  --btms-color-success: #166534;
  --btms-color-success-container: #ecfdf5;
  --btms-color-success-outline: #bbf7d0;
  /* M3는 error-container의 경계선 색을 따로 두지 않는다. */
  --btms-color-error-outline: #fecaca;

  /* 본문 기본 글꼴. site별 palette에서 오버라이드한다. */
  --btms-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* 형태/치수 — 프로토타입 3종에서 측정한 값.
     radius는 8px가 지배값(trv 98 / mgr 113 / agy 162회), 카드류는 16px, 칩/뱃지는 pill. */
  --btms-radius-md: 8px;
  --btms-radius-lg: 16px;
  --btms-radius-pill: 999px;
  --btms-button-radius: var(--btms-radius-md);
  --btms-control-height: 40px;
  --btms-button-height: 38px;
  --btms-font-size-body: 13px;

  /* Breakpoint — 출장자 프로토타입이 쓰는 두 단계를 기준으로 삼는다.
     (출장관리자/여행사 프로토타입에는 미디어쿼리가 없다.)

       840px 이하 : 레이아웃 전환. 사이드바를 가로 바로, GNB를 2행으로,
                    다단 grid를 1단으로 접고 PC/모바일 전용 블록을 교체한다.
       480px 이하 : 모바일 미세 조정. 표 스택, 터치 타깃 44px, 여백 축소.

     CSS 변수는 미디어쿼리 조건에 사용할 수 없으므로 값 자체는 각 파일에 직접 쓴다.
     아래 변수는 규격을 한 곳에 남기기 위한 기록용이다.
     위 두 값 외의 breakpoint는 추가하지 않는다 (TC-UI-010). */
  --btms-breakpoint-narrow: 840px;
  --btms-breakpoint-mobile: 480px;
}