/* 비무브 셸 토큰 브리지 (formula-x.app 전용)
   ------------------------------------------------------------
   트레이너 화면(css/bemove-trainer.css)과 센터 체크리스트(css/center-checklist.css)는
   두 앱이 **바이트 동일**로 공유하는 파일이라, 짐토스 셸의 의미 토큰
   (--surface-*, --line-*, --text-*, --radius-N, --state-*, --font-* …)만 쓴다.

   짐토스 앱에서는 css/gymtos-design.css + css/brand-theme.css 가 그 값을 넣는다.
   이 앱에는 그 레이어가 없다. 여기서 Be:Move 토큰(--bm-*)으로 이어준다.
   공유 파일을 고치지 않고 이 앱 쪽에서만 값을 대는 것이 요점이다.

   스코프: Bemove 모드 안, 그것도 두 화면의 루트에만 건다. Formula X 브랜드와
   같은 앱의 다른 화면에는 닿지 않는다.
   다크는 web/brands/bemove/theme.css 가 --bm-* 를 바꾸므로 대부분 저절로 따라온다.
   ============================================================ */

body:is([data-app-mode="bemove"], [data-bemove-brand="1"]) :is(.bmt, .cl-root) {
  /* 면 */
  --surface-app: var(--bm-chalk);
  --surface-card: var(--bm-surface);
  --surface-raised: var(--bm-surface);
  --surface-sunken: var(--bm-surface-muted);
  --surface-inverse: var(--bm-charcoal-900);
  --surface-accent: var(--bm-orange-500);
  --surface-accent-soft: color-mix(in srgb, var(--bm-orange-500) 12%, transparent);
  --surface-hover: var(--bm-charcoal-050);

  /* 글자 */
  --text-strong: var(--bm-text);
  --text-body: var(--bm-text-sub);
  --text-muted: var(--bm-text-sub);
  --text-faint: var(--bm-charcoal-400);
  --text-accent: var(--bm-orange-600);
  --text-on-accent: var(--bm-white);
  --text-inverse-muted: var(--bm-charcoal-300);

  /* 선 */
  --line-hairline: var(--bm-border);
  --line-strong: var(--bm-charcoal-300);
  --line-accent: var(--bm-orange-500);

  /* 상태 */
  --state-success: var(--bm-green-500);
  --state-warning: var(--bm-amber-500);
  --state-danger: var(--bm-red-500);

  /* 짐토스 셸이 액센트 축으로 쓰는 이름. 이 브랜드에서는 오렌지가 그 축이다. */
  --cyan-300: var(--bm-orange-400);
  --cyan-600: var(--bm-orange-600);
  /* 중립 램프 별칭 */
  --charcoal-300: var(--bm-charcoal-300);
  --steel-200: var(--bm-charcoal-200);
  --steel-300: var(--bm-charcoal-300);
  --steel-400: var(--bm-charcoal-400);
  --steel-800: var(--bm-charcoal-800);
  --steel-900: var(--bm-charcoal-900);

  /* 서체 · 형태 · 모션 */
  --font-core: var(--bm-font-body);
  --font-display: var(--bm-font-display);
  --font-mono: var(--bm-font-mono);
  --radius-1: 2px;
  --radius-2: var(--bm-radius-control);
  --radius-3: var(--bm-radius-card);
  --radius-pill: 999px;
  --elev-1: var(--bm-shadow-card);
  --elev-3: var(--bm-shadow-sheet);
  --ring-focus: var(--bm-ring-focus);
  --dur-fast: 130ms;
  --dur-base: 200ms;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

html[data-bemove-theme="dark"] body:is([data-app-mode="bemove"], [data-bemove-brand="1"]) :is(.bmt, .cl-root) {
  /* --surface-inverse 는 다크에서도 어둡게 둔다. 공유 CSS 가 그 면 위에 #fff 를
     세 군데 박아뒀기 때문에(토스트·슬롯카드·보고 패널) 밝은 면으로 뒤집으면
     흰 글씨가 사라진다. 카드(#1a1e24)보다 더 어두운 900 으로 구분만 준다. */
  --text-accent: var(--bm-orange-400);
  --line-strong: var(--bm-charcoal-200);
}